Слайд шоу и img radius

[Scrum]

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

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

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

Проблемы:

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

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

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

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

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

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

[Shift-Web]

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

[Scrum]

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

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

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

[Shift-Web]

Там плагин случаем с position: absolute в динамике не балуется? Есть возможность поковырять исходник?

[Scrum]

cycle - балуется, задает элементу position: absolute. Пощупать можно на официальном клац

На счет PIE не скажу пощупать можно тут

Example: test.html

[psywalker]

А нельзя ли забить на все эти сраные скрипты и сделать всё по человечески?

[Scrum]

Предлагай.

[psywalker]

Предлагай.

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

[Scrum]

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

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

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

[psywalker]

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

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

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

[Scrum]

Мне как то не радужно раундить картинки в фотошоеп.

[psywalker]

Мне как то не радужно раундить картинки в фотошоеп.

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

Покажи мне скриншот того, что должно получиться.

[Scrum]

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

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

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

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

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

[sigma77]

Scrum,

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

[Scrum]

Scrum,

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

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

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

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

[psywalker]

Решение отписал в личку.

[Shift-Web]

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 February 18, 2011 by Shift-Web

[Scrum]

Решение отписал в личку.

Туда же.

Shift-Web Спасибо посмотрю, попробую.

[Shift-Web]

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

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

Edited February 18, 2011 by Shift-Web

[Scrum]

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

[Shift-Web]

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

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

[Shift-Web]

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

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

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

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

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

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

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

test

Edited February 19, 2011 by Shift-Web

[psywalker]

Чё то у меня в ИЕ вообще беда серая.

[Scrum]

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

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

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

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

[psywalker]

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

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

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

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

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