
Октябрь 25, 2019 Запись была обновлена
Галерея изображений на jQuery с интересным эффектом

Сегодня мы рассмотрим jQuery плагин Flipping Gallery, который позволяет создавать классные галереи изображений с очень оригинальными переходами. В примере есть 5 видов переходов с использованием данного плагина. Плагин действительно очень прост в использовании, поэтому любой сможет с ним полноценно работать.
Посмотрите также — Интерактивная 3D галерея на CSS и jQuery
Пример можно увидеть здесь:
Посмотреть примерСкачать
Мы рассмотрим более подробно как создать меню из Демо 2, когда меню появляется слева вверху.
HTML часть
Сперва необходимо подключить библиотеку jQuery, которую можно скачать здесь и плагин Flipping Gallery, между тегами <head>:
1 2 3 4 5 6 | <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery.flipping_gallery.js"></script> ... </head> |
Затем располагаем изображения. Вы можете добавлять столько изображений, сколько пожелаете:
1 2 3 4 5 6 7 8 | <div class="gallery"> <a href="#"><img src="img/1.jpg"></a> <a href="#"><img src="img/2.jpg"></a> <a href="#"><img src="img/3.jpg"></a> <a href="#"><img src="img/4.jpg"></a> <a href="#"><img src="img/5.jpg"></a> ... </div> |
А чтобы добавить описание для изображений(как в демо 4 и 5) необходимо использовать атрибут data-caption:
1 2 3 4 5 6 7 8 | <div class="gallery"> <a href="#" data-caption="Очень"><img src="img/1.jpg"></a> <a href="#" data-caption="классная"><img src="img/2.jpg"></a> <a href="#" data-caption="галерея"><img src="img/3.jpg"></a> <a href="#" data-caption="с помощью"><img src="img/4.jpg"></a> <a href="#" data-caption="Flipping"><img src="img/5.jpg"></a> ... </div> |
JS часть
1 2 3 4 5 6 7 8 9 | $(".gallery").flipping_gallery({ direction: "forward", selector: "> a", spacing: 10, showMaximum: 15, enableScroll: true, flipDirection:"bottom", autoplay:500 }); |
Рассмотрим что означает каждый метод:
- direction — метод отвечающий за то, как будут появляться изображения. Если «forward», то изображение из начала будет помещаться в конец, если «backward» — наоборот. По умолчанию значение задается «forward».
- selector — селектор по которому выбираем изображения, его можно изменить по желанию.
- spacing — задает отступ между изображениями в перспективе.
- showMaximum — задает количество изображений, которые видны пользователю. Можно использовать хоть 100 изображений, но показываться будут только первые 15, что очень удобно и не нагружает браузер.
- enableScroll — можно просматривать изображения используя колесо мыши.
- flipDirection — определяет куда будет скользить изображение: «left» — влево, «right» — вправо, «top» — вверх и «bottom» — вниз. По умолчанию оно скользит вниз.
- autoplay — автозапуск галереи. Задается в милисекундах, т.е. через сколько будут сменяться изображения.
Вывод
Теперь у вас есть великолепная галерея, которую можно использовать при размещении своих фотографий.
Успехов!
Источник: www.onextrapixel.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Классные галерейки!Благодарю.
Вячеслав, рад что вам пригодились :).
Жаль что не работает в IE? а так красиво