Топ плагінів jQuery. Плагін jQuery Little Lightbox для фотографій

11

Від автора: і знову здрастуйте. Дозвольте представити вам черговий плагін з розряду must have. Сьогодні ми познайомимося з ще одним jQuery плагіном, що реалізує ефект а-ля Lightbox для перегляду фотографій в модальному вікні. У статті ми використовуємо плагін Little Lightbox, який є аналогом jQuery Lightbox.

Сьогодні практично на кожному сайті виникає необхідність організувати невелику галерею або просто одиночне зображення, яке хотілося б збільшити при кліці і показати збільшену копію зображення. До всього іншого хотілося б показати збільшене зображення красиво: без перезавантаження сторінки і з симпатичним ефектом. Все це дозволяють зробити плагіни а-ля jQuery Lightbox (за назвою одного з перших плагінів в своєму роді).

Саме завдяки затребуваності подібних плагінів пропонується величезна кількість, що називається — на будь-який смак. Можна сказати, що плагіни jQuery Lightbox є, мабуть, найбільш популярними jQuery плагінами.

Сьогодні ми попрацюємо з плагіном jQuery Little Lightbox, ось його сторінка на GitHub. Скачайте архів з файлами звідти або ж, як зазвичай, візьміть з исходников. Підключимо необхідні для роботи файли:

Тепер розмітка і кілька красивих фотографій:

Топ плагінів jQuery. Плагін jQuery Little Lightbox для фотографій

І наостанок — виклик плагіна методом littleLightBox():

$(‘.lightbox’).littleLightBox();

В результаті ми отримаємо невелику фотогалерею з переглядом оригінальних зображень в модальному вікні – jQuery Lightbox.

Топ плагінів jQuery. Плагін jQuery Little Lightbox для фотографій

Пару слів щодо розмітки. Однакове значення атрибута data-littlelightbox-group дозволяє згрупувати фотографії для перегляду. Ну а вміст атрибута title використовується для підпису картинок.

Плагін jQuery Little Lightbox також має ряд опцій. Наприклад, опції openMethod і closeMethod дозволяють змінити анімаційний ефект при відкритті і закритті картинок. Всі доступні опції та їх значення ви можете знайти в об’єкті defaults в коді плагіна.

Ну а в мене на сьогодні все. В результаті ми отримали відмінну альтернативу плагін jQuery Lightbox. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!