Галерея зображень на jquery з цікавим ефектом

Сьогодні ми розглянемо jQuery плагін Flipping Gallery, який дозволяє створювати класні галереї зображень з дуже оригінальними переходами. У прикладі є 5 видів переходів з використанням даного плагіна. Плагін дійсно дуже простий у використанні, тому будь-хто зможе з ним повноцінно працювати.

Подивіться також - Інтерактивна 3D галерея на CSS і jQuery

Приклад можна побачити тут:

Подивитися прімерСкачать

Ми розглянемо більш докладно як створити меню з Демо 2, коли меню з`являється зліва вгорі.

HTML частина

Спершу необхідно підключити бібліотеку jQuery, яку можна завантажити тут і плагін Flipping Gallery, між тегами :

lt;headgt; ...lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Http://code.jquery.com/jquery.flipping_gallery.js"gt; lt;/scriptgt; ...lt;/headgt;

Потім маємо зображення. Ви можете додавати стільки зображень, скільки забажаєте:

12345678

lt;div class="Gallery"gt;lt;a href="#"gt; lt;img src="Img / 1.jpg"gt; lt;/agt;lt;a href="#"gt; lt;img src="Img / 2.jpg"gt; lt;/agt;lt;a href="#"gt; lt;img src="Img / 3.jpg"gt; lt;/agt;lt;a href="#"gt; lt;img src="Img / 4.jpg"gt; lt;/agt;lt;a href="#"gt; lt;img src="Img / 5.jpg"gt; lt;/agt; ...lt;/divgt;

А щоб додати опис для зображень (як в демо 4 і 5) необхідно використовувати атрибут data-caption:

12345678

lt;div class="Gallery"gt;lt;a href="#" data-caption="Дуже"gt; lt;img src="Img / 1.jpg"gt; lt;/agt;lt;a href="#" data-caption="Класна"gt; lt;img src="Img / 2.jpg"gt; lt;/agt;lt;a href="#" data-caption="Галерея"gt; lt;img src="Img / 3.jpg"gt; lt;/agt;lt;a href="#" data-caption="за допомогою"gt; lt;img src="Img / 4.jpg"gt; lt;/agt;lt;a href="#" data-caption="Flipping"gt; lt;img src="Img / 5.jpg"gt; lt;/agt; ...lt;/divgt;

JS частина

123456789

$(".gallery").flipping_gallery({direction: "Forward",selector: "Gt; a",spacing: 10,showMaximum: 15,enableScroll: true,flipDirection:"Bottom",autoplay:500})-

Відео: Модулі для Wordpress. Базові настройки: галереї картинок, красиві ефекти і інше

Розглянемо що означає кожен метод:

direction - метод відповідає за те, як будуть з`являтися зображення. Якщо «forward», то зображення з початку буде міститися в кінець, якщо «backward» - навпаки. За замовчуванням значення задається «forward».
selector - селектор по якому вибираємо зображення, його можна змінити за бажанням.
spacing - задає відступ між зображеннями в перспективі.
showMaximum - задає кількість зображень, які видно користувачеві. Можна використовувати будь-100 зображень, але показуватися будуть тільки перші 15, що дуже зручно і не навантажує браузер.
enableScroll - можна переглядати зображення використовуючи колесо миші.
flipDirection - визначає куди буде ковзати зображення: «left» - вліво, «right» - вправо, «top» - вгору і «bottom» - вниз. За замовчуванням воно ковзає вниз.
autoplay - автозапуск галереї. Здається в мілісекундах, тобто через скільки будуть змінюватися зображення.