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

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

Вот такой симпатичный эффект плавно меняющихся картинок в фото галерее можно получить, используя 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. Меньше число — быстрее меняются. Напомню, что в скриптах время указано в миллисекундах. Соответственно 1000 мс = 1 сек.

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

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

<div class="slideshow">
<img src="photo1.jpg" with="800" height="533" alt="" />
<img src="photo2.jpg" with="800" height="533" alt="" />
<img src="photo3.jpg" with="800" height="533" alt="" />
</div>

Надеюсь, вам понравился эффект.

Enjoy!

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

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

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

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

  1. Сергей | 29.03.2016

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

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

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