Веб-дизайн та пошукова оптимізація. Опис jQuery Lightbox Lightbox галерея

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

Як встановити lightbox Завантажуєте архів, розпаковуєте та закачуєте на сервер.
Далі вбудовуєте скрипт у свій сайт. У html кодсторінки прописуєте код

І останній крок. Виведення зображень.
Виведення зображень робите так

Стандартний код виведення маленької картинки та посилання на велику картинку, тільки до посилання додається два параметри.
Ось приклад цього коду - при натисканні на картинці спливає велике зображення.

За такий ефект відповідає параметр data-lightbox="image".
Якщо у вас на сторінці багато зображень, ви можете зробити відкриття зображень без перегортання у спливаючому вікні, а можете поєднувати зображення і вони будуть перегортатися у спливаючому вікні.
Для об'єднання зображень потрібно використовувати одне ім'я для кожної групи картинок

Як бачите, всі картинки можна переглянути у спливаючому вікні, оскільки data-lightbox у всіх однаковий.
Якщо хочете розділити картинки, щоб вони не горталися, використовуйте такий код

Тепер кожна картинка відкривається окремо, тобто немає можливості перегорнути до наступної.

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

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

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

Звичайно, такої ситуації не повинно бути, навіщо виводити дві однакові картинки, а потім видаляти їх. Але як не дивно, я зіткнувся з такою ситуацією, в одному інтернет-магазині у товару мали виводитися дублюючі фотки (там були хитрі заміни фоток через скрипти), і при перегляді через lightbox дублюючі фотки виглядали дуже неправильно. Ось там і знадобилося видалення дублів.

Коментарі

11.12.2014 Віктор
Скрипт дуже гарний. За допомогою data-title можна навіть описати картинку. Але у мене виникла проблема, у мене на сторінці стояв скрипт, який висував блок збоку при підключенні даного скрипту, він у мене пропадає. Причому пропадає він, якщо підключені js скрипти. Думав через версію конфліктує немає не через них.

23.05.2015 Віктор
У мене не працює, коли
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
має такий вигляд. Без?ver=20150523142822
працює

25.05.2015 kaha
thanks a lot

29.06.2015 Андрій
Дуже дякую, за вашу працю! Все запрацювало практично з першого разу)

26.08.2015 Олександр
перепробував різні аналоги. без конфліктів цей став одразу. збільшення до оригін. розміру гут.якщо б ще мишкою брати і зрушувати поле картинки-взагалі капець

01.11.2015 Ігор
Вітаю!
Чудова галерея. Величезне спасибі.
Тільки таке запитання:
У наведеному вище прикладі (3 картинки) зображення показуються зациклено. А в завантаженій версії lightbox-2.7.1 ця функція не працює. Під час перегляду останнього зображення кнопка не з'являється.
Підкажіть, будь ласка, у чому може бути причина?

14.11.2015 Антон

15.11.2015 Антон
на IOS та Андроїді затемнення екрану відбувається не на всю сторінку! в чому може бути проблема. У звичайному ЛайтБоксі – все ОК!

30.03.2016 Антон
Вітаю!
А чи можна зробити так, щоб картинка відкривалася у більшому дозволі?

18.11.2016 Юра
Велике дякую! Все працює чудово!

04.05.2017 Ігор
Велике дякую за скрипт! Дуже давно шукав щось схоже і легко встановлюється.
Тільки у мене чомусь під фотками незрозумілі написи з'являються Р 8 8 8 8 8 8 8 8 8 8

Може десь треба кодування виправити?

12.09.2017 Barsuk
Де ж ти був раніше! Цілий день витратив на те, щоб прикрутити видалення дублів))

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

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

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

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

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
Ліцензія: Не визначив, може вам пощастить)))

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

4. PhotoSwipe

Залежність: Javascript або jQuery
Підтримка браузерами
Ліцензія: MIT license

11. FeatherLight

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

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

12. LightGallery

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

допомогою CSS

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

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

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

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

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

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

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

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

Чи знаходитесь у пошуках відповідного русифікованого шаблону для ваших цілей? Ймовірно, в такому випадку вам варто відвідати маркетплейс TemplateMonster. З тієї простої причини, що зовсім недавно на сайті з'явився новий розділшаблонів. Тепер кожен користувач може ознайомитися з колекцією, яка оновлюватиметься та оновлюватиметься. Тексти шаблонів були написані вручну. Але це не єдиний плюс даних готових рішень. Адже у їхніх пакетах можна знайти все, що полегшить роботу над розробкою онлайн-проекту, включаючи візуальний редактор.

З повагою Андрій

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

У цьому огляді ми зібрали список JQuery бібліотек та скриптів для створення lightbox, які допоможуть розробникам та дизайнерам створювати ще якісніші та професійні веб-сайти.

Ви можете легко додати нижченаведені скрипти на свій сайт. Тому без подальших передмов давайте перейдемо до теми та розглянемо ці супер JQuery – бібліотеки лайтбоксів, якими ви можете поповнити свій арсенал.

PhotoSwipe – це HTML фотогалерея на основі CSS та JavaScript, орієнтована спеціально на мобільні пристрої. Автори при її розробці взяли як зразок сервіси перегляду зображень для мобільних пристроїв IOS та Google. PhotoSwipe має знайомий та інтуїтивно зрозумілий інтерфейс, що дозволяє простіше працювати із зображеннями на мобільному сайті.

Підтримуються всі основні функції: перехід до наступного або попереднього зображення, збільшення, перетягування, зменшення або закриття та інші.

Swipebox – JQuery -плагін для стаціонарних комп'ютерів, смартфонів та планшетів. Він підтримує сенсорне керування для мобільних пристроїв, навігацію за допомогою клавіатури для настільних пристроїв, CSS переходи з резервним перемиканням на керування JQuery, досить простий у налаштуванні.

Плагін був протестований на Chrome, Safari, Firefox, Opera, Internet Explorer 8+, iOS4+, Android, Windows Phone. Випускається за ліцензією MIT.

iLightBox дозволяє легко створювати дуже гарні адаптивні модальні вікна, використовуючи JQuery . Поєднуючи в собі підтримку широкого спектру медіа-контенту з чудовими скінами та зручним API, iLightBox прагне зробити lightbox настільки ідеальним, наскільки це тільки можливо. iLightBox надає можливість перегляду в повноекранному режимі, Retina-сумісні скіни, сенсорне управління подіями, можливість інтеграції YouTube та Vimeo для HTML5-відео, потужний JavaScript API. Плагін має безкоштовну підтримкута оновлення версій.

Image Lightbox – мінімалістичний, розширюваний та налаштований плагін під IOS, Android та Windows Phone. Ви можете просто завантажувати за допомогою клавіатури наступне зображення завдяки використанню перетворень та переходів CSS.

Magnific Popup – це безкоштовний адаптивний JQueryплагін, який орієнтований на забезпечення найкращої взаємодії між користувачем та пристроєм. Для більшості lightbox-плагінів потрібно визначати розмір вікна за допомогою JS. У Magnific Popup ви можете використовувати відносні одиниці вимірювання, такі як EM або змінювати розмір lightbox за допомогою медіа-запитів CSS.

Nivo Lightbox – це гнучкий lightbox-плагін. На вибір пропонується безліч опцій, за допомогою яких можна легко змінити зовнішній виглядлайтбоксу. Наприклад, змінити тему, ефект переходу та метод навігації.

Lightcase - гнучкий, адаптивний і розширюваний lightbox -плагін, розроблений з допомогою JQuery. Він чудово працює у всіх популярних браузерах, таких як Internet Explorer 7+, Firefox, Opera, Webkit та інших. Плагін підтримує фото, відео, HTML5-відео, Iframe, SWF та AJAX-дзвінки.

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

Strip – це lightbox, який розгортається лише на частину сторінки. Це робить його менш нав'язливим та дозволяє взаємодіяти з іншими елементами сторінки на великих екранах; на мобільних пристроях lightbox має класичний вигляд. Strip використовує JQuery та підтримується у всіх основних браузерах.

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

Featherlight – дуже легкий плагін у 400 рядків JavaScript, 100 рядків CSS та розміром менше 6Кб. Інтелектуальний, адаптивний lightbox, за умовчанням підтримує зображення, AJAX та iframe. Ви також можете адаптувати його до своїх завдань. Featherlight працює в IE8+, всіх сучасних браузерахта мобільних платформах.

Yalb розшифровується, як ще один lightbox (Yet Another Lightbox) але це не так. Yalb поставляється з великим набором інтерфейсів, що включають події користувача, які дозволяють визначати його стан (відкритий, закритий ).

→ Lightbox на jQuery

У статті наведено приклад запуску плагіна галереї lightbox на jquery і тут можна завантажити робочий варіант. Ось так вона власне працює:

Ця реалізація lightbox хороша тим, що нею можна керувати через конфігураційний хеш. Запускається дуже просто. Для запуску плагіна необхідна будь-яка бібліотека jquery, починаючи з версії 1.2.6, сам плагін lightbox та стильовий файл. В архіві трохи нижче лежить готовий варіант. Завантажте, розпакуйте та відкрийте файл index.html у будь-якому браузері. Має працювати.

Сподіваюся, як запустити всім зрозуміло. Розповім лише як керувати налаштуваннями lightbox. Відразу зазначу, що плагін не працює в IE 6, і тому ставимо умову ініціалізації для всіх, крім «ослика». Далі ще один важливий момент: $(document).ready , тому що до готовності дерева DOM ініціалізації не прокотить. Сам процес ініціалізації відбувається так:

$("#gallery a").lightbox();

Приклад вихідного коду:

if (!(navigator.userAgent.indexOf("MSIE 6") >= 0))( $(document).ready(function()( $("#gallery a").lightbox(); $.Lightbox.construct (( "speed": 500, "show_linkback": true, "keys": ( close: "q", prev: "z", next: "x"), "opacity": 0.8, text: ( image: " Картинка", of: "з", close: "Закрити", closeInfo: "Завершити перегляд можна, клікнувши мишею поза картинкою.", help: ( close: "", interact: "Інтерактивна підказка" ), about: ( text: "", title: "", link: "/index.shtml" ) ), files: ( images: ( prev: "/demo/img/jquery-lightbox/prev.gif", next: "/demo/img/ jquery-lightbox/next.gif", blank: "/demo/img/jquery-lightbox/blank.gif", loading: "/demo/img/jquery-lightbox/loading.gif" ) ))); )); )

speed - швидкість ефекту відкриття фото та його закриття, в мілісекундах.

Параметри хеша keys: close, prev і next – це клавіші, якими здійснюється альтернативне керування переглядом галереї.

opacity - прозорість фону, що затемняється. Приймає значення від 0 до 1. Колір тла можна змінити у стильовому файлі.

Параметри хеша images, вкладеного в хеш files, це шляхи до картинок для фону, анімації індикатора завантаження та кнопок назад-вперед.

Також у хеше text можна змінювати написи для навігації.

Найпопулярнішою бібліотекою є Lightbox Javascript, яку ми багато років використовуємо на робочих столах, але не на мобільних платформах.

Надаю вашій увазі 14 Lightbox плагінів з підтримкою мобільних платформ.

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

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

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

Необхідні бібліотеки: JQuery 1.9.1+ чи Zepto.js
Підтримка браузерів: IE7 (частково), .
Ліцензія: Ліцензія MIT

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

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

Необхідні бібліотеки: JQuery та Bootstrap модуль
Підтримка браузерів: IE8+, Chrome, Firefox, Safari, та Opera
Ліцензія: GNU ліцензія

Nivo Lightbox — це лайтбокс плагін, що гнучко налаштовується. Різні опції дозволяють змінити зовнішній вигляд. Наприклад: тему, анімацію появи, та виду навігації.

Необхідні бібліотеки: JQuery
Підтримка браузерів:
Ліцензія: Ліцензія MIT

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

Необхідні бібліотеки: JQuery
Підтримка браузерів: IE9+, Chrome, Firefox, Safari, та Opera
Ліцензія: Не визначено

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

Необхідні бібліотеки: ні
Підтримка браузерів: Internet Explorer 10+, Chrome, Firefox, Safari, та Opera
Ліцензія: Ліцензія MIT

Lightcase прекрасний лайтбокс плагін. Підтримує кілька видів анімацій, такі як: fade, elastic, zoom та scrolling. Крім того, він також підтримує різні види медіа, включаючи Youtube Embed, HTML відео, SWF та форм введення.

Необхідні бібліотеки: JQuery
Підтримка браузерів: IE9+, Chrome, Firefox, Safari, та Opera
Ліцензія: GPL ліцензії

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

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

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

Необхідні бібліотеки: JQuery
Підтримка браузерів: IE9+, Chrome, Firefox, Safari, та Opera
Ліцензія: Ліцензія MIT

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

Необхідні бібліотеки: JQuery
Підтримка браузерів: IE7+, Chrome, Firefox, Safari, Opera, IOS, Android та Windows Phone
Ліцензія: Ліцензія MIT

Fluidbox лайтбокс плагін працює із зображеннями. Включає підтримку різне відображення, включаючи плаваюче зображення, зображення з абсолютної позиції, зображення з межами та відступами та галереї. Також існує WordPress плагін.

Необхідні бібліотеки: JQuery
Підтримка браузерів: IE9+, Chrome, Firefox, Safari, Opera
Ліцензія: Ліцензія MIT

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

Необхідні бібліотеки: JQuery
Підтримка браузерів: IE7+, Chrome, Firefox, Safari, Opera, IOS 5+, та Android 3+
Ліцензія Creative Commons BY-NC-ND 3.0 License