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

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

Вот такой симпатичный эффект плавно меняющихся картинок в фото галерее можно получить, используя 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!

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

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

  1. Сергей | 29.03.2016

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

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

  3. Артем | 09.04.2019

    здравствуйте.
    сделал через CSS width 100% и при CTRL + «+» или CTRL + «-» размер width то увеличивается, то уменьшается.
    сначала грешил на CSS, перепроверил все по сто раз, а теперь уже не знаю что и думать

  4. Игорь Квентор | 16.04.2019

    Здравствуйте, Артем!

    Не совсем вас понял. Что именно вы сделали «через CSS width 100%» ?

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