Головна  /  Відновлення даних  /  Плагін лайтбокс. Веб-дизайн і пошукова оптимізація

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

Відновлення даних
30.08.2020

Багато разів робив огляди різних галерей зображень, зібрав велику колекцію ефектних слайд-шоу і -плагінов. Є в скарбничці і 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-розмітка у вигляді невпорядкованого списку

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

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

    13. StripJS

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

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

    14. LightLayer

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

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

    15. FluidBox

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

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

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

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

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

    Two individual images

    Four image set

    Getting started

      Download a zip of the latest release (or any previous one) from the Github Releases page.

      Or install using npm:

      Npm install lightbox2 --save

      Open up the zip file and take a peek at the barebones, working example that is included in the / examples folder.

    1. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the / dist folder.

      • Include the CSS at the top of your page in your tag:
      • Include the Javascript at the bottom of your page before the closing tag:

    2. Make sure jQuery, which is required by Lightbox, is also loaded.

      • If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
      • If you are not currently using jQuery, I "ve created a packaged file that includes both Lightbox and jQuery. Include dist / js / lightbox-plus-jquery.js instead of lightbox.js.
    3. Confirm that the four images loaded by lightbox.css are in the correct location. You can grab the images from the / dist / images folder.

    Initialize with HTML

    • Single images. Add a data-lightbox attribute to any image link to enable Lightbox. For the value of the attribute, use a unique name for each image. For example: Optional:
      • Add a data-title attribute if you want to show a caption.
      • Add a data-alt attribute if you want to set the alt attribute of the linked image.
    • Image sets. If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:

    Options

    If you want to change any of the default options, call the option method.

    Option Default Description
    alwaysShowNavOnTouchDevices false If true, the left and right navigation arrows which appear on mouse hover when viewing image sets will always be visible on devices which support touch.
    albumLabel "Image% 1 of% 2" The text displayed below the caption when viewing an image set. The default text shows the current image number and the total number of images in the set.
    disableScrolling false If true, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body.
    fadeDuration 600 The time it takes for the Lightbox container and overlay to fade in and out, in milliseconds.
    fitImagesInViewport true If true, resize images that would extend outside of the viewport so they fit neatly inside of it. This saves the user from having to scroll to see the entire image.
    imageFadeDuration 600 The time it takes for the image to fade in once loaded, in milliseconds.
    maxWidth If set, the image width will be limited to this number, in pixels. Aspect ratio will not be maintained.
    maxHeight If set, the image height will be limited to this number, in pixels. Aspect ratio will not be maintained.
    positionFromTop 50 The distance from top of viewport that the Lightbox container will appear, in pixels.
    resizeDuration 700 The time it takes for the Lightbox container to animate its width and height when transition between different size images, in milliseconds.
    showImageNumberLabel true If false, the text indicating the current image number and the total number of images in set (Ex. "Image 2 of 4") will be hidden.
    wrapAround false If true, when a user reaches the last image in a set, the right navigation arrow will appear and they will be to continue moving forward which will take them back to the first image in the set.

    Browser support

    Lightbox2 has been tested successfully in the following browsers:

    • Internet Explorer.
      The lightbox-plus-jquery.js file includes jQuery v2.x and supports IE 9 +. If you want to support IE 6, 7, and 8, use your own copy of jQuery v1.x with lightbox.js.
    • Chrome
    • Safari
    • Firefox
    • iOS Safari
    • iOS Chrome
    • Android Browser
    • Android Chrome

    License

    • 100% Free. Lightbox is free to use in both commercial and non-commercial work.
    • Attribution is required.This means you must leave my name, my homepage link, and the license info intact. None of these items have to be user-facing and can remain within the code.

    Help

    Have a question about how to use Lightbox?

    Follow the steps below to get help. Make sure you have read the documentation on this page and looked at the included example first.

    1. Search Stackoverflow to see if other people have run into the same issue you are having.
    2. If your issue is unique, then post a new question on Stackoverflow. Use the lightbox2 tag.

    Do not use Github Issues to report personal support requests.

    Found a bug?

    If you find a bug, follow the instructions in the Contribution Guildelines to report the issue.

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

    Перш ніж встановлювати плагін на сторінку і займатися його налаштуванням, давайте поглянемо на приклади:

    Початок роботи з Lightbox

    Скачайте останню версію плагіна (також доступна через Bower: bower install lightbox2 --save). Після цього розархівуйте zip файл і загляньте в урізаний робочий приклад, який знаходиться в папці examples.

    Готові для установки Lightbox на вашій сторінці? Почніть з підключення CSS і Javascript. Ви можете взяти обидва цих файлу з папки dist. Вставте цей код між тегами head у вашій web-сторінці

    Наступний код, що включає плагін, вставте перед закриває тегом body:

    Переконайтеся, що JQuery, який потрібно Lightbox, також завантажуються. Якщо ви вже використовуєте JQuery (потрібно JQuery 1.7 або вище) на сторінці, переконайтеся, що він завантажується до lightbox.js. Якщо у вас не підключена jQuery, воспользуйтель dist / js / lightbox-plus-jquery.js, в якому вже є ця бібліотека, або скачайте останню версію з оф. сайту. Переконайтеся, що чотири зображення, прописані в lightbox.css расположени в зазначеному місці. Ви можете взяти зображення з папки / Dist / images.

    Тепер займемося HTML-кодом. Додайте атрибут data-lightbox до заслання, що містить зображення і до яких ми хочемо застосувати наш плагін. У якісно значення атрибута використовуйте унікальне для кожного зображення ім'я. наприклад:

    Image # 1

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

    Img 2 Img 3 Img 4

    налаштування Lightbox

    Якщо ви хочете змінити будь-які параметри за замовчуванням, викличте метод option :.

    • alwaysShowNavOnTouchDevices За замовчуванням: false

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

    • fadeDuration За замовчуванням: 500

      Час, необхідний для зникнення контейнера, в мілісекундах.

    • fitImagesInViewport За замовчуванням: true

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

    • maxWidth

      Якщо задано, висота зображення буде обмежена цим значенням (в пікселях). Співвідношення сторін не буде дотримуватися.

    • maxHeight

      Якщо задано, ширина зображення буде обмежена цим значенням (в пікселях). Співвідношення сторін не буде дотримуватися.

    • positionFromTop За замовчуванням: 50

      Відстань від верхньої частини вікна перегляду до Lightbox-контейнера (в пікселях).

    • resizeDuration За замовчуванням: 700

      Час, протягом якого Lightbox-контейнер буде змінювати свою ширину і висоту при зміні зображень різного розміру (в мілісекундах).

    • showImageNumberLabel За замовчуванням: true

      якщо false, В текст буде вказуватися поточний номер зображення та загальна кількість зображень в наборі, наприклад: "Зображення 2 з 4".

    • wrapAround За замовчуванням: false

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

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

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

    PhotoSwipe

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

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

    Magnific Popup

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

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

    SwipeBox

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

    Lightbox для Bootstrap

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

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

    Nivo Lightbox

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

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

    ImageLightbox

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

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

    міні Lightbox

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

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

    LightCase

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

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

    Featherlight

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

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

    LightLayer

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

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

    LightGallery

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

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

    FluidBox

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

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

    StripJS

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

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

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

    Ці jQuery плагіни використовуються для додавання на сайт спливаючих вікон. Такі плагіни є дуже потужним інструментом для будь-якого веб-дизайнера і розробника, оскільки допомагають домагатися досить красивих ефектів, які надають звичайному сайту ефектний і привабливий вигляд. Щоб користуватися jQuery плагіном, вам потрібні базові знання JavaScript і jQuery. Якщо ви не знаєте основ, то просто читайте опис плагіна і коректний.

    LightZoom

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

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

    Lightbox для Bootstrap

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

    Strip

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

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

    Rebox

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

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

    LightGallery

    LightGallery - це легко настроюється jQuery плагін для створення адаптивної галереї. У ньому є абсолютно все, що Вам необхідно: перегляд в лайтбоксі, слайд-шоу, збільшення на весь екран, прев'юшки. Також користувач, який переглядає галерею, може відразу завантажити картинку.

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

    jQuery Lightbox Plugin

    Плагін jQuery LightBox простий, витончений, ненав'язливий, не вимагає додаткової розмітки і використовується для накладення зображень на поточній сторінці завдяки потужності і гнучкості селектора jQuery.

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

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

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

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

    Являє собою jQuery UI mediabox, який здатний відображати безліч типів контенту, включаючи зображення і відео з YouTube і Vimeo. Тут є безліч унікальних властивостей, включаючи Panorama і Live Re-size.

    jQuery TosRus

    jQuery TosRus - зручний і функціональний jQuery плагін для роботи з відео і зображеннями. Скрипт може виступати в ролі лайтбокс-інструменту і горизонтального слайдера одночасно. Контент в модальних вікнах за замовчуванням чуйний. Адаптований під сенсорні пристрої.

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

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

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

    jQuery Superbox

    jQuery Superbox дозволяє дуже просто створювати лайтбокси для зображень, груп зображень, зовнішніх сторінок, або певного вмісту. Плагін повністю доступний і зрозумілий, і використовує атрибут «rel» для запуску скрипта і «href» для вказівки адреси зображення або сторінки.

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

    - це ще один адаптивний JQuery Lightbox плагін, який підходить для відображення зображень, iFrames, Google-Maps, Vimeo і YouTube відео. Плагін розраховує максимальну ширину зображення на екрані і зберігає пропорційну висоту, навіть якщо вона більше, ніж висота вікна.

    Дозволяє вам легко створювати красиві спливаючі вікна, використовуючи jQuery. Ви можете вдосконалити ваш медіа-контент автоматично або створювати спливаючі вікна на ваш смак, використовуючи потужний API.

    - відмінний адаптивний лайтбокс. Його можна використовувати для створення сногшібательних галерей, які будуть відмінно виглядати на будь-яких екранах.

    Magnific Popup - це зручний в роботі плагін jQuery lightbox, зосереджений на продуктивності. Його головна мета - забезпечити зручність роботи на будь-якому пристрої.

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