Плавная смена картинок на jQuery
04.03.2009Как изменить src тега img с помощью jQuery? Как сделать плавный переход между картинками на jQuery? Да, и вообще, как добавлять свои элементы в уже готовую структуру страницы?
На этот и, возможно, другие вопросы Вам поможет, я надеюсь, моя мини-галерея, основанная на fadeIn и fadeOut переходе. Как всегда, всё бесплатно с пояснениями по функциям и переменным.
Итак, нам понадобится всего ничего: jQuery и мой мини-плагин FadeIt. Скачать jQuery можно с официального сайта, а плагин ctepeo - Сигнал (276) с этого блога 
Теперь немного о переменных и работе скрипта.
В архиве мы имеем 4 картинки (2 нормальные и 2 уменьшенные их копии), 1 css файл (для красоты ), 1 html файл и 1 javascript файл (jQuery.FadeIt), надеюсь, jQuery у Вас уже есть 
. В коде html и FadeIt есть комментарии для более доступного понятия «по шагам», но, если рассматривать скрипт в общем, он в указанный блок добавляет 2 блока (увеличенная картинка и блок для превью) (функция fadeItInit()), далее с вызовом каждой fadeItAdd добавляет в превью картинки, после чего ждёт нажатия на картинки и плавно меняет src увеличенного изображения и указывает в блоке превью выбранную картинку.
Функции:
fadeIt() – создает в указанный блок 2 блока для дальнейших махинаций
fadeItAdd(path, path2thumb, main) – Добавляет картинку. path – путь к увеличенной картинке, path2thumb – к уменьшенной, main – если 1, то эта картинка будет сразу в блоке для увеличения.
Далее идёт обработчик нажатия на превью. Хочется пояснить непосредственно что представляет из себя плавная смена картинок:
$(«#fadeItFullImg»).fadeOut(«fast», function(){
$(«#fadeItFullImg»).attr(«src», xe);
$(«#fadeItFullImg»).fadeIn(«slow»);
});
Сперва увеличенная картинка быстро (fast) растворяется, после растворения (callback функция), происходит смена аттрибута картинки src, то есть непосредственно путь к картинке, после этого сразу начинается процесс медленного (slow) отображения картинки.
Думаю, это будет достаточно простой и удобный пример для тех, кто желает разобраться в смене картинок на jQuery и callback функциях. В любом случае Вы можете задать вопрос в комментах. Хорошего Вам дня!
Скачать скрипт можно вот тут: ctepeo - Сигнал (276)
Демо FadeIt: jquery fadeout fadein
RSS комментариев этой записи.
Здравствуйте!
Как в jQuery сделать так, чтоб открывалась картинка и по прошествии 10 секунд плавно перетекала в следующую, и в следующую, а потом в исходную и так далее в цикле?..
т.е.
при открытии странички отображается картинка 1
плавно переходит в картинку 2
плавно переходит в картинку 3
плавно переходит в картинку 1
…
Comment от Lacis W — 01.05.2009 @ 15:38
Lacis W, в jQuery, насколько мне известно, нету функции wait(), о ней Вы можете погуглить(если кратко, то JavaScript’овская setInterval.
Если я не ошибаюсь, то Ваш скрипт должен выглядеть как отображение img1, setInterval(), fadeIt, расчёт следующей картинки для показа.
Если у Вас возникнут проблемы при реализации данного алгоритма или будут более здравые идеи – пишите, с радостью захочу помочь.
Comment от ctepeo — 02.05.2009 @ 00:37
ctepeo пасиб, реализовал идею.
Comment от Lacis W — 02.05.2009 @ 01:43
Здравствуйте
а можно ли реализовать так, чтоб картинки менял=ись в фоне?
т.е. есть див – в нем меняется фоновый рисунок каждые 5 секунд.. так вот хотелось бы плавно…
спасибо
Comment от Иван — 09.09.2009 @ 12:22
Иван, да, можно, но немного другим способом:
1) Если над блоком есть текст или любой другой контент: нужно положить див в див
и делать для $(«#myBlockToHide»).animate({opacity:0},1000,»linear»,function(){
$(«#myBlockToHide»).css(«backgroundImage»,»/img/second_bg.jpg»);
$(«#myBlockToHide»).animate({opacity:1},1000);
});
то есть скрываем весь блок за 1 секунду(1000мс), меняем ему фон, и опять отображаем за 1 секунду.
2) Если сверху нету текста/контента, то повторяем то же самое, что и в пункте 1, только не вкладывая див в див.
Стоит отметить, что для IE opacity работать не будет, поэтому нужно будет применять следующий css:
«filer:alpha»:»(opacity:100)» (100- не прозрачный вовсе, 0- полная прозрачность).
Для организации действий через каждые n секунд, лучше почитать про setInterval(). Судя по всему этот вопрос (интервалы) интересен, напишу скоро статью на эту тему.
Если у Вас есть ещё какие-либо вопросы, пишите, буду рад помочь
Comment от ctepeo — 09.09.2009 @ 14:33
Сtepeo помоги плиз, я хочу поставить твой скрипт себе на сайт. Смысл есть 5 меню сайта, под каждое меню своя шапка0картинка, я хочучтоб при нажатии кнопки мои шапки картинки менялись так. вот сайт пока в разработке может по коду подскаже как http://www.deltafly.ru/deltafly.ru/index.html
спасибо жду овтета
Comment от Арсен — 10.10.2009 @ 15:20
Я чуток рабобрался, вот хотел спросить можно ли картинку эту заменить ссылкой на другой раздел сайта?
// Начинаем составлять структуру
fadeIt();
// Наполняем картинками
fadeItAdd(‘images/1_01.jpg’, ‘learntofly.html’,1);
fadeItAdd(‘images/school.jpg’, ‘learntofly.html’,0);
Comment от Арсен — 10.10.2009 @ 15:48
Я новичок в js. У меня возник вопрос. Подскажите как адреса маленьких и больших картинок подставлять из БД?
Comment от gvik — 28.10.2009 @ 11:17
$sql=»SELECT * FROM `твоя таблица` «;
$result=mysql_query($sql);
$num_results=mysql_num_rows($result);
там будеш из масива пхпником выризать …
П,С. у меня когдато было так
Comment от xxx — 26.11.2009 @ 20:25
Подскажите, а кроме значений «slow» и «fast» есть цифровые значения изменения скорости? Это для более тонкой настройки.
Comment от Надежда — 16.03.2010 @ 18:35
Да, если указывать вместо предустановленных значений «slow»/»fast» цифровые, то можно более точно подобрать необходимое время анимации.
1000 = 1 секунда, то есть строчка
$(«#myID»).animate({background-color:»red»},1200);
сменит фон у элемента с id=»myID» за 1,2 секунды
Так же можно использовать easing для того, чтобы эффект проходил не линейно.
Comment от ctepeo — 16.03.2010 @ 18:53
Здравствуйте! Как сделать так, чтобы вместо уменьшенных картинок былии пункты меню?
Comment от александр — 27.05.2010 @ 18:06