15 Лайтбокс бібліотеки для мобільного реагування

Лайтбокс - це один популярний спосіб накладання зображень в Інтернеті. Коли ви клацаєте по зображенню, лайтбокс з'являється з деякою формою анімації, а затемнюється фон, так що ваш фокус знаходиться на самому зображенні. Зображення також має більший масштаб. Найбільш популярні бібліотеки JavaScript Lightbox, які ми знали протягом багатьох років, дозволяють вам робити це на робочому столі, але не на мобільних платформах.

Нехтування цим, а також потреба у реагуванні, сьогодні не є гарною ідеєю, тому цю колекцію з 15 відповідних бібліотек Lightbox необхідно перевірити.

Докладніше про Hongkiat:

• Створення модального вікна легко за допомогою діалогового вікна HTML5
• Топ-10 безкоштовних фоторепортажів / слайд-шоу
• Створення, контроль і налаштування кращого модального вікна для вашого сайту за допомогою Vex
• jQuery Галереї зображень і повзунки - Best Of

PhotoSwipe

PhotoSwipe на сьогоднішній день мій улюблений плагін ligthbox. Це легкий, сенсорний і, головне, модульний, що дозволяє мені відмовитися від декількох частин, які не потрібні. Він працює в мобільних браузерах. Ви можете промахувати зображеннями пальцями так, як це було б у рідному додатку, і перехід виконується дуже гладко.

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

MagnificPopup

MagnificPopup це ще один лайтбокс плагін, розроблений тією ж людиною, що дав нам PhotoSwipe, Дмитро Семенов. Він поставляється у вигляді JQuery / Zepto плагіна, а також приносить можливості, які відсутні в PhotoSwipe, такі як підтримка відео, карти, і вміст Ajax. Це чудова альтернатива для тих, хто вважає за краще мати більше можливостей під рукою.

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

SwipeBox

Swipebox є плагіном jQuery з підтримкою жестів дотику для мобільної платформи. Він також підтримує відео з Youtube і Vimeo, крім зображень. Swipebox також цілком легко реалізується і має кілька варіантів для налаштування його поведінки. Я думаю, що Swipebox є прекрасним плагіном лайтбокса для noobs JavaScript.

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

iLightbox

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

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

Лайтбокс для Bootstrap

Лайтбокс є одним з яскраво відсутніх частин з Bootstrap. Цей плагін виправляє це. Якщо ви використовуєте Bootstrap, я настійно рекомендую використовувати цю бібліотеку. Плагін добре інтегрований з кодовою базою Bootstrap.

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

Ніво Лайтбокс

Ніво Лайтбокс є гнучким плагіном lightbox. Включено декілька варіантів, які дозволяють змінити вигляд у спосіб, у який вам сподобається, наприклад змінювати тему, ефект переходу та перемикати навігацію.

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

ImageLightbox

ImageLightbox є плагіном lightbox без наворотів. Вона створена спеціально для зображення, отже, дане ім'я - не підтримується відео чи інший тип носія. Вона також не вимагає сторонньої HTML-розмітки; елемента достатньо. Плагін просто працює.

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

Міні лайтбокс

Інший лайтбокс плагін з жодним з наворотів. Бібліотека лише 2 кб і працює тільки з зображеннями. Це ідеальний плагін, якщо ви призначите лише останній веб-переглядач і не потрібно накладати інші типи носіїв, наприклад відео.

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

LightCase

Lightcase - чудовий плагін lightbox. Він поставляється з декількома анімаціями, які роблять взаємодію з користувачем оживають, як вицвітання, еластичне масштабування та прокручування. Крім того, він також підтримує різні типи засобів масової інформації, включаючи вбудовування Youtube, HTML відео, SWF і форми введення. Плагін також правильно обробляє медіа не може бути досягнуто або знайдено помилок

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

Ялб

Ялб виступає за Yet Another Lightbox - але це не так. Yalb поставляється з декількома API, включаючи спеціальні події, які дозволяють ідентифікувати стану лайтбокс, наприклад, коли вони є відчинено і коли вона є закрити. Yalb поставляється в двох версіях, Vanilla JavaScript і JQuery плагін.

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

FeatherLight

6kb Featherlight - це повний плагін для розроблюваного розробника і містить лише найнеобхідніше. Якщо вам потрібно, наприклад, групувати лайтбокс зображення в галереї, можна включити розширення галереї. Ви також можете розробити власне розширення для цього плагіна, щоб відповідати потребам вашого проекту.

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

LightLayer

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

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

LightGallery

LightGallery, інший плагін lightbox з великою кількістю функцій. Він поставляється з більш ніж 20 варіантів, щоб налаштувати найдрібніші деталі лайтбокса.

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

FluidBox

Fluidbox є плагіном "Лайтбокс" зображення, натхненний від Medium. Він працює з зображеннями в різних обставинах, включаючи плаваюче зображення, зображення з абсолютний положення, зображення, які мають межі та відступи, і галереї. Перевірте, як він був побудований. Якщо вам потрібен плагін WordPress, є один.

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

StripJS

StripJS - унікальний плагін lightbox. Замість того, щоб накладати зображення, плагін переміщує зображення з боку, щоб не блокувати весь вміст. StripJS підтримує як зображення, так і відео.

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