Фото галерея с плавно меняющимися картинками

cycle-plugin.jpg

Сначала смотрим ДЕМО >>>

Вот такой симпатичный эффект можно получить, используя jQuery и плагин Cycle. На самом деле эффектов там несколько. Перейдите по ссылке на сайт авторов и увидите сами. Я расскажу лишь про эффект плавной смены картинок — fade.

Для работы, как вы понимаете, понадобится сам плагин, который можно скачать здесь и библиотека jQuery версии от 1.2.6 и выше. Из скачанного архива с плагином нам понадобится только скрипт с именем jquery.cycle.min.js. Прописываем пути в <head> </head>. Как это сделать, я уже рассказывал ранее.

Там же прописываем условия работы плагина:

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 1000 });
});
</script>

В данном случае помимо самого эффекта добавлен регулятор скорости смены картинок (timeout: 1000). Меньше число — быстрее меняются. Полный список всевозможных опций здесь. Добавлять их нужно в столбик, отделяя каждую запятой.

Выводится блок с картинками на странице очень просто:

<div class="slideshow">
<img src="Chufut-Kale1.jpg" with="800" height="537" alt="" />
<img src="Chufut-Kale2.jpg" with="800" height="537" alt="" />
<img src="Chufut-Kale3.jpg" with="800" height="537" alt="" />
</div>

Enjoy!

01.04.2011

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

2 комментария

  1. Сергей

    29.03.2016

    Спасибо большое за пример!

  2. Игорь Квентор
    http://www.websovet.com/
    31.03.2016

    Пожалуйста, Сергей!

Оставить комментарий: