15 Адаптивних jQuery плагіни Lightbox

66

Багато разів робив огляди різних галерей зображень, зібрав велику колекцію ефектні слайд-шоу і лайтбокс-плагінів. Є в скарбничці і Lighbox виключно на CSS3, без підключення додаткових js-бібліотек. Але час не стоїть на місці, користувачі все частіше використовують для серфінгу інтернету різні мобільні пристрої, а значить адаптивність веб-елементів і зокрема фото-галерей з ефектом «лайтбокс» стає одним з пріоритетів, на який веб-дизайнерам і розробникам варто звертати увагу.

Уявляю чергову підбірку з 15 адаптивних jQuery плагіни Lightbox, які дружать, як з десктопними браузерами, так і відмінно вписуються в екрани різних мобільних пристроїв ( ноутбуки, смартфони, планшети тощо).

Дивіться демо на сайтах розробників, скачивайте вподобаний плагін та творіть, творіть, творіть…

1. iLightbox

iLighbox — це легкий Лайтбокс-плагін jQuery з підтримкою широкого діапазону різних типів файлів: зображення, відео, Flash / SWF, зміст Ajax, фрейми і вбудовані карти. Цей плагін додає кнопки соціальних мереж, що дозволяє користувачам обмінюватися контентом через Facebook, Twitter або Reddit. Відмінна можливість організації ефектні слайд-шоу, галерей зображень і відео-роликів, з переглядом у звичайному, і повноекранному режимі.

iLighbox працює досить спритно і при перегляді на мобільних пристроях, більш ніж коректно відображає оброблюваний контент. Крім усього іншого, використовуючи цей плагін, ви легко зможете реалізувати висновок інформаційних блоків за типом модального вікна.

  • Залежність: jQuery
  • Підтримка браузерами: IE7+, Chrome, Firefox, Safari і Opera
  • Ліцензія: А чорт її знає)))

Демо | Скачати

2. SwipeBox

Swipebox — це плагін JQuery з підтримкою сенсорних екранів мобільних платформ. Крім зображень плагін підтримує вбудований відео з Youtube і Vimeo. Swipebox дуже просто прикрутити до будь-якого проекту, плагін має кілька інтуїтивно-зрозумілих опцій для налаштування його функціонал і поведінки. На сайті розробника докладна документація щодо підключення і використання плагіна, без зайвої води все тільки по справі, так що розібратися що, куди і навіщо, думаю буде не складно.

  • Залежність: jQuery
  • Підтримка браузерами: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android і Windows Phone
  • Ліцензія: Не визначив, може вам пощастить)))

SwipeBox - Адаптивный Lighbox плагин jQuery

Демо | Скачати

3. MagnificPopup

Давно відомий і добре себе зарекомендував лайтбокс-плагін jQuery або Zepto.js. Автор плагіна — Дмитро Семенов, який є розробником і плагіна PhotoSwipe, про який розповім трохи нижче. Поставляється у вигляді плагіна jQuery/Zepto, має більш широкі можливості відсутні у PhotoSwipe, такі як підтримка відео, відображення карт і Ajax змісту, реалізація модальних вікон із вбудованими формами. За всіма критеріями, це ще один чудовий інструмент в обоймі веб-розробника. Окремо є плагін для WordPress і докладна документація по налаштуванню і використання. Засмучує тільки відсутність документації Російською, судячи з імені та прізвища автор начебто Російська, ніколи не розумів через шкідливості це, або ж з-за уявного усвідомлення своєї нашорошеності, так мля. Ну да ладно, кому воно треба розбереться, ми теж чай не некруто зварені))).

  • Залежність: jQuery 1.9.1+, або Zepto.js
  • Підтримка браузерами: IE7 (partially), IE8+, Chrome, Firefox, Safari і Opera
  • Ліцензія: MIT license

MagnificPopup - Lighbox-плагин jQuey или Zepto.js

ДемоСкачать

4. PhotoSwipe

Ще одна Javascript-галерея зображень від Дмитра Семенова, на відміну від MagnificPopup без будь-яких наворотів, але в той же час, весь необхідний функціонал в наявності. Організація галерей незалежно від наявності бібліотеки jQuery, перегляд у звичайному і повноекранному режимі, збільшення зображень з елементами анімації, підписи до картинок і елементи управління, адаптивна верстка, підтримка управління жестами сенсорних екранів, для простої і легкої фото-галереї всього цього цілком достатньо. Вся необхідна документація в наявності.

  • Залежність: Немає
  • Підтримка браузерами: IE8+, Chrome, Firefox, Safari, Opera і ще парочка мобільних браузерів
  • Ліцензія: MIT license

PhotoSwipe - Адаптивная Javascript галерея изображений

ДемоСкачать

5. Nivo Lightbox

Старий-добрий Nivo від розробників студії Dev7studios, які давно і з завидною постійністю радують нас своїми роботами. Nivo Lightbox плагін, як автономний плагін jQuery надається абсолютно безкоштовно, а за спеціалізований плагін для WordPress доведеться відвалити від $39.00 до $149.00 в залежності від типу ліцензії. Хоча, скажу по секрету, якщо добре пошукати в інтернеті, можна нарити і халявний варіант, звичайно якщо вам дозволять ваші принципи.
Безкоштовний варіант плагіна упакований усіма необхідними функціями, гнучкі налаштування, кілька варіантів зовнішнього вигляду, різні ефекти переходів і навігації. Підтримка Iframe, SWF, відео з Youtube і Vimeo. Працює плагін дуже швидко, практично без затримок, контент, який відображається відмінно вписується в розміри екранів мобільних пристроїв.

  • Залежність: jQuery
  • Підтримка браузерами: IE9+, Chrome, Firefox, Safari і звичайно Opera
  • Ліцензія: MIT license

Nivo Lightbox - Адаптивный Lightbox-плагин jQuery

Завантажити

6. Lightbox для Bootstrap

Дивно, але в такому популярному фреймворку як Bootstrap, Lightbox як такий відсутній, представлений, однойменний плагін, був створений щоб виправити ситуевину. Звичайно, в Bootstrap є динамічні модальні вікна, ось саме на них і спирається робота плагіна Lightbox. Якщо ви щільно використовуєте Bootstrap, я рекомендую застосовувати цю бібліотеку. Плагін добре інтегрується з базовим кодом Bootstrap. У підсумку ви отримаєте повноцінні галереї зображень і можливість перегляду відео з YouTube в модальному вікні.

  • Залежність: jQuery і Bootstrap Modal
  • Підтримка браузерами: IE9+, Chrome, Firefox, Safari і звичайно Opera
  • Ліцензія: GNU general public license

Lightbox для Bootstrap

Завантажити

7. ImageLightbox

Це лайтбокс плагін теж без особливих наворотів. Розроблений спеціально для зображень, звідси стало бути і назва, ні відео, ні інші типи вмісту не підтримуються, все тільки на роботу з картинками. Галерея з цим плагіном виходить динамічна і легко настроюється, додаткової розмітки HTML не потрібно, достатньо одного тега з ідентифікатором imagelightbox. Плагін працює дуже просто і швидко, є можливість додати підписи, елементи навігації і кнопку закриття, за замовчуванням закривається лайтбокс по кліку поза зображення. Впевнений, цей плагін багатьом припаде до душі.

  • Залежність: jQuery
  • Підтримка браузерами: IE9+, Chrome, Firefox, Safari і Opera
  • Ліцензія: На немає і суду немає

ImageLightbox - Адаптивный Lightbox плагин

ДемоСкачать

8. MiniLightbox

Назва плагіна говорить сама за себе. Все по самому мінімуму, бібліотека jQuery не потрібна, немає потреби додатково розмітці, обробка тега з заданим класом для мініатюри, або ж використання атрибуту data-image-opened, в якому вказується шлях до повнорозмірної картинки. Ні відео, ні фрейми та інші типи вмісту крім зображень не підтримуються. Якщо ви не стурбовані підтримкою старими браузерами, і вам не потрібно комбайн, для відображення різного роду утримання, цей малюк вагою в 2кб впорається з поставленим завданням, продемонструвати ваші фотографії, або просто картинки.

  • Залежність: Немає
  • Підтримка браузерами: IE10+, Chrome, Firefox, Safari і Opera
  • Ліцензія: MIT license

MiniLightbox - Легкий Lightbox плагин

ДемоСкачать

9. LightCase

Lightcase це ще один чудовий лайтбокс-плагін. Він поставляється з декількома варіантами анімації, що робить взаємодію з користувачем більш живим і насиченим, плавне поява і збільшення, скролинг праворуч, ліворуч, знизу, і зверху. Крім того, плагін підтримує різні типи вмісту, включаючи вбудоване відео з Youtube, HTML, SWF, HTML5 відео і форми входу, iframe і карти Google. Можливість використання елементів управління (переходів) і підписів до зображень. В цілому добротний механізм подання практично будь-якого змісту.

  • Залежність: jQuery і CSS3
  • Підтримка браузерами: IE9+, Chrome, Firefox, Safari і Opera
  • Ліцензія: GPL license

LightCase - Адаптивный Lightbox-плагин jQuery

ДемоСкачать

10. Yalb

Ще один лайтбокс в двох варіантах виконання. Версія Yalb (Vanilla) побудована на чистому Javascript, використовує js-функції, які доступні тільки в сучасних браузерах. Всі анімації здійснюється за допомогою CSS-анімації і переходів(transition). Якщо ви хотіли б JQuery-версію, є й така, зверніть увагу на jQuery.yalb

  • Залежність: Javascript або jQuery
  • Підтримка браузерами: IE9+, Chrome, Firefox, Safari і Opera
  • Ліцензія: MIT license

Yalb - Ещё один Ligtbox

Завантажити

11. FeatherLight

6 к. бітний lightbox-плагін, для більш-менш підкованих розробників, споряджений всіма самими необхідними функціями. Крім підтримки всіх поширених типів контенту(текст, зображення, iframe, Ajax), є можливість підключення додаткового розширення галереї зображень, а також ви можете розробити свій власний розширення для цього плагіна, який буде повністю відповідати вашим потребам при створенні нового проекту. Як все це господарство(розробка розширення) працює, особливо не вникав, але ті кого цей плагін вставить, думаю розберуться))).

  • Залежність: jQuery
  • Підтримка браузерами: IE8+, Chrome, Firefox, Safari і Opera
  • Ліцензія: MIT license

FeatherLight - Lightbox-плагин jQuery

Демо | Скачати

12. LightGallery

LightGallery — багатофункціональний лайтбокс-плагін з безліччю додаткових можливостей. Поставляється з більш ніж 20 опцій для налаштування найдрібніших деталей Lightbox. Тут є все, ну, або майже все)). Повноцінна галерея зображень з акуратно вибудованими мініатюрами, з елементами навігації та прокруткою мініатюр. Проста html-розмітка у вигляді неупорядкованого списку

    з використанням атрибута data-src для повнорозмірних зображень. Теж саме і з відео з Youtube і Vimeo. Чудово підтримує всі формати відео HTML5, MP4, WebM, Ogg… Анімовані мініатюри, адаптивний макет з підтримкою мобільних пристроїв, слайд-ефекти і плавні переходи появи при перемиканні зображень та іншого вмісту. Зовнішній вигляд легко формується і настроюється за допомогою CSS. Попереднє завантаження зображень та оптимізація коду. Навігація за допомогою клавіатури для десктопів, а також можливість використання додаткових шрифт-іконок. LightGallery — ось де справжній «комбайн», головне не загубитися у великій кількості налаштувань і великих можливостях цього плагіна.
    Тим кому потрібен пристойний слайдер, рекомендую звернути увагу на lightSlider від цих же розробників.

    • Залежність: jQuery
    • Підтримка браузерами: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android і Windows Phone
    • Ліцензія: MIT license

    LightGallery - Многофункциональный Lightbox

    Демо | Скачати

    13. StripJS

    Незвична, я б навіть сказав: незвичайна реалізація lightbox, точніше, не зовсім звичне уявлення змісту, коли зображення або відео, в оформленні лайтбоксу, з’являються праворуч, заповнюючи при цьому не весь екран, а лише на заданий розмір повнорозмірної картинки або відео. На великих екранах такий підхід зрозумілий, залишається можливість взаємодії зі сторінкою. На маленьких екранах мобільних пристроїв, вся ця інноваційна конструкція, плавно переходить в класичний «лайтбокс». Задумка цікава, подивіться демо, може кого і вставить такий креатив.

    • Залежність: jQuery
    • Підтримка браузерами: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ і Android 3+
    • Ліцензія: Creative Commons BY-NC-ND 3.0 license

    StripJS - Необычный Lightbox плагин

    ДемоСкачать

    14. LightLayer

    Простий у використанні плагін лайтбоксу, який добре поєднується з будь-яким проектом і також добре виглядає на будь-якому екрані. В плагіні LightLayer представлений контроль над безліччю налаштувань, такими як зміна кольору фону та ступеня її прозорості, положення базового блоку, вибір ефектів переходів при відкритті/закритті, функції якими користувачі можуть маніпулювати самостійно. Плагін відмінно працює з вмістом зовнішніх веб-сайтів, вбудованими відео-плеєрами і картами.

    • Залежність: jQuery
    • Підтримка браузерами: IE9+, Chrome, Firefox, Safari і Opera
    • Ліцензія: MIT license

    LightLayer - Простой плагин Lightbox

    Завантажити

    15. FluidBox

    Fluidbox — лайтбокс плагін виключно для зображень. Кількість всіляких варіацій представлення зображень по-справжньому вражає. Плагін чудово працює з зображеннями у різному виконанні, включаючи плаваючі зображення, зображення з абсолютним позиціонуванням, картинки і фотографії обрамлені рамкою, і мають відступи, з поодинокими зображеннями, і об’єднаними в галерею. Загалом, що даремно воду лити, розписати всі можливості плагіна в коротенькому поданні все одно не вийде, так що краще подивіться демо, покрутіть, покрутіть і думаю, цей плагін сподобається багатьом.

    • Залежність: jQuery
    • Підтримка браузерами: IE9+, Chrome, Firefox, Safari, Opera
    • Ліцензія: MIT license

    FluidBox - Lightbox-плагин для изображений

    ДемоСкачать

    На цьому мабуть і все! Сподіваюся цей невеликий огляд, який допоможе вам розібратися в оберемку пропонованих продуктів веб-розробки. Хочу зауважити, що далеко не всі з представлених у збірці плагіни я використовував на робочих проектах, більшість з них промацував на тестових майданчиках або на лаколке, так що при виникненні будь-яких питань, швидше за все будемо вирішувати їх разом, а разом, як завжди все у нас вийде.

    З Повагою, Андрій .

    Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: