Jump to content

Слайд шоу и img radius


Scrum
 Share

Recommended Posts

Задача стоит следующего характера, имея набор картинок разного размера сотворить слайд шоу где картинки буду с закругленными углами и находиться на градиентном фоне.

В принципе все сделал, но ослик, до 9 версии, как всегда.

Картинки висят бэкграундом на элементе.

Проблемы:

1.Если закруглять углы через corner то по углам остаются дефекты. К сожалению corner нормально работает при цветовом бэкграунде.

2.Несовместимость в работе cycle и PIE.

3.Картинки все таки пришлось уменьшить до нужного размера.

Если кто-то решал подобное, буду рад узнать как.

Не предлогать:

1.Закруглить картинки в фотошопе.

Link to comment
Share on other sites

Какого рода несовместимость?

Показывает картинки с периодичностью, по истечению времени исчезают и потом опять показывает, все это проходит без затухания.

Примерно так.

Link to comment
Share on other sites

А чё тут предлагать то, ты вот просто представь себе, что нет больше плюшек этих и подумай, как бы ты тогда делал.

А остается тот вариант который я просил не предлагать.

Вопрос по сути нерабочий, скорее принципиальный для увеличения выбора вариантов с гибкими возможностями.

Link to comment
Share on other sites

А остается тот вариант который я просил не предлагать.

Вопрос по сути нерабочий, скорее принципиальный для увеличения выбора вариантов с гибкими возможностями.

Да в том то и дело, что в этих скриптах нет гибкости. Они все со своими косяками, которые потом скажутся в вёрстке, обязательно. Эти скрипты - веселуха для молодых, так что пока ты не подсел ещё на них, слезай и делай всё как нужно, как мы все делаем. :)

Link to comment
Share on other sites

А раньше ты как делал?

Раньше я не смешивал это со слайд шоу.

Дело в том что нормальный раунд картинки можно сделать только если он идет в стилях как background. Для тега img большинство брайзеров не делает скругления, а это все кроме хрома и сафари.

Показывать нечего. Берем любой бекграунд желательно не однотонного цвета, берем набор картинок и пытаемся сделать их скругленными, потом делаем слайд шоу из них же. Пример есть выше.

Линк кинул в ЛС

Link to comment
Share on other sites

Scrum,

PIE очень фигово относится к любой динамике, что если попробовать задавать стили для ИЕ в самом скрипте... :)

Ну я в принципе отказался от этой затеи и перешол в торону corner который дает почти ожидаемый результат но с дефектами по углам.

что если попробовать задавать стили для ИЕ в самом скрипте...

Поясни пож. не очень понял.

Link to comment
Share on other sites

li {
height: 300px;
width: 605px;
-pie-border-radius: 10px;
behavior: url(htc/PIE.htc);
}

li {
position: relative;
height: 300px;
width: 605px;
border-radius: 10px;
behavior: url(htc/PIE.htc);
}

Вот так лучше. И её лучше:

main css

li {
height: 300px;
width: 605px;
border-radius: 10px;
}

<!--[if IE]><link type="text/css" rel="stylesheet" media="all" href="ie-fix.css" /><![endif]-->

ie-fix.css :

li {
position: relative;
border-radius: 10px;
behavior: url(htc/PIE.htc);
}

Версия PIE у Вас устаревшая похоже. Попробуйте - должно сработать.

Ещё момент. fadein и fadeout манипулирует параметром прозрачности. В итоге если opacity достигает нуля - элемент в любом браузере выгружается из DOM можно сказать. Нужен какой то хук, который будет следить и выставлять значение постоянно. Тут всё дело в порядке работы JS.

Edited by Shift-Web
Link to comment
Share on other sites

Scrum, щас музычку под настроение найду - полезу в .htc с зубилом и надфилем. Уже давно мысль разобрать его по винтикам и найти проблему с динамикой. Даже решение почти придумал. Нужно бехавиоры цеплять к элементам через jQuery и сделать хук на освежение. Пока не уверен, что сработает именно с .htc, но там скрипт обычный JS - можно вытащить наверное. В общем отпишу к утру ;D

Мне тоже впадлу в шопе резать и обёртки мудрить. Это потенциально мешает юзать RDFa и микроформаты.

Edited by Shift-Web
Link to comment
Share on other sites

>> Shift-Web Удачи. Давно бы разобрал если бы был силен.

Вы думаете я настолько силён? Да там всё просто на самом деле. Меня друпал научил уже давно плагины под 1.2.8 с кастрированным набором функций перетачивать ;D

Link to comment
Share on other sites

Кароче, надо меньше долбиться в глаза и заниматься чем-то одним.(это я себе)

Лисапед уже был :)

В общем. Уголки приятнее чем на webkit. Артефактов нету почти.

Минус - тени неадекватные, накладывает на всю площадь элемента, из-за этого притормаживает. По сути есть что то вроде отложенной обработки, в принципе потребности особой нет в этом. В IE7 не даёт на body градиент воткнуть(тут уже я наверное туплю).

В виду того, что это дело можно обыграть через jQuery(в тот же плагин запилить функцию для прорисовки), то осёл вполне себе потянет(если не делать много шевелящей фигни). Не получилось через JS изменить линейный градиент.

Если выность в стили чисто для ие - работает пошустрее.

Что думаете? По идее это beta 3.

test

Edited by Shift-Web
Link to comment
Share on other sites

Shift-Web Сдается мне что мы взяли кур не в том направлении.

1."В итоге если opacity достигает нуля - элемент в любом браузере выгружается из DOM можно сказать" - я думаю для плавного изменения, значение (opacity) двух элементов меняются одновременно, по этому можно сказать что оба элемента присутствую, хотя по поведения напоминает именно ваше описание. (попозже попробую сварганить примерчик.)

2."Лисапед уже был" - не вижу смысла отслеживать parentNode.

3.Пока еще не проверил.

Link to comment
Share on other sites

Shift-Web Сдается мне что мы взяли кур не в том направлении.

1."В итоге если opacity достигает нуля - элемент в любом браузере выгружается из DOM можно сказать" - я думаю для плавного изменения, значение (opacity) двух элементов меняются одновременно, по этому можно сказать что оба элемента присутствую, хотя по поведения напоминает именно ваше описание. (попозже попробую сварганить примерчик.)

2."Лисапед уже был" - не вижу смысла отслеживать parentNode.

3.Пока еще не проверил.

Дружище, а у тя в ИЕ пашет чтоли?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy