Главная » jQuery » Десятка Адаптивных Lightbox Плагинов

Десятка Адаптивных Lightbox Плагинов

считается на сегодняшний день одним из самых популярных и эффектных способов отображения изображений, мультимедиа и другого информационного контента без обновления страницы. Существует огромное количество одноименных плагинов LightBox, для создания привлекательного эффекта наложения. В последнее время появляются довольно хорошие и работоспособные решения, выполненные с помощью CSS3, без использования javascript.
Реальность диктует условия, а она такова сейчас, что адаптивная верстка и дизайн сайтов, это уже не просто очередная модная фишка, а вполне устоявшаяся модель представления веб-сайтов. Шаблоны сайтов, элементы интерфейса, виджеты и так же эволюционируют, если так можно сказать, чтобы соответствовать адаптивной модели, для корректного отображения во всех пользовательских устройствах, от широкоформатных мониторов компьютера, до экранов мобильных телефонов. Всевозможные модальные окна, информационные блоки, галереи изображений использующие различные формы LightBox эффекта тоже не исключение.

Предлагаю на ваше рассмотрение подборку из десяти адаптивных «лайтбоксов». Все модальные окна изменяют свои размеры в зависимости от размеров окна просмотра и отлично впишутся на экраны мобильных пользовательских устройств. Я даже откопал один интересный лайтбокс, который предлагается в виде бесплатного десктопного приложения под названием Visual Lightbox, такой своеобразный LightBox-генератор, с помощью которого вы сможете легко создать свою неповторимую галерею изображений с замечательным эффектом представления.
 

CSS Modal

CSS Modal разработан на чистом CSS и небольшого javascript. Модальное окно выполнено с использованием метода адаптивного веб-дизайна и отлично работает на  экранах размером от небольшого мобильного телефона до экранов высокого разрешения настольных компьютеров.  Неплохое решение для вывода информационных сообщений, небольших галерей изображений или подгружаемого видео с других источников, таких как YouTube, Vimeo и других.  На сайте разработчика доступны примеры работы и подробная документация по установке.  С помощью CSS,  вы с легкостью сможете сформировать внешний вид модального окна на свой вкус и цвет.
 
Адаптивный Lightbox CSS
 

Visual LightBox

А вот и полноценный автономный LightBox-генератор. Visual Lightbox – отличная бесплатная программа, которая поможет Вам легко создавать веб галереи изображений с замечательным Lightbox-эффектом. Программа очень проста в освоении и дальнейшем использовании. Вам не нужно сидеть и перелопачивать кучу дополнительного кода, достаточно переместить нужные вам картинки или фотографии в окно Visual LightBox, без страха и упрека нажать кнопку «Опубликовать», и все, Ваша полноценная галерея с лайтбокс-эффектом откроется в окне браузера. Программа имеет много новых тем оформления и эффектов для ваших галерей, возможность вращения изображения, а также качественного масштабирования со сглаживанием, организация слайд-шоу с функцией автоматического проигрывания, встроенный FTP клиент и много других полезных фишек.
 
Приложение Visual LightBox
 

FancyBox

Конечно же хорошо всем знакомый, проверенный и надежный FancyBox, мощный инструмент для организации эффектных представлений масштабируемых изображений, текстового и мультимедийного контента на страницах веб-сайтов. Плагин построен с использованием библиотеки javascript , при этом очень прост в установке и настройке. Разработчики плагина позиционируют свое детище, как альтернативу широко известному Lightbox от Leandro Vieira Pinho. Fancybox имеет достаточно настроек, с помощью которых вы сможете одинаково легко выводить в модальном окошке увеличенную картинку при клике на уменьшенном изображении, организовать галерею слайдов с навигацией, или просто вывести всплывающее окно с разнообразным содержанием. Теперь вся эта красота, замечательно будет отображаться на любых экранах пользовательских устройств.
 
FancyBox плагин jQuery
 

Magnific Popup

Magnific еще один абсолютно бесплатный jQuery Lightbox плагин, который ориентирован на лучшее представление различного содержания в всплывающих окнах на экранах любых пользовательских устройств. С помощью этого плагина, вы сможете реализовать просмотр как одиночных масштабируемых изображений, так и создать эффектную галерею картинок. Magnific позволяет легко и просто интегрировать в всплывающее окно различные формы, без потери введенных данных при закрытии окна или переходе на другую страницу. Диалоговые окна с элементами CSS анимации, встроенное видео с популярных видео сервисов, пользовательская настройка с помощью параметров и через CSS, стабильная поддержка всеми современными браузерами. Для WordPress существует отдельная версия, доступная по подписке на новости от автора плагина.
 
Magnific Popup адаптивный Lightbox плагин
 

iLightbox

iLightBox позволяет без особого труда создавать адаптивные окна с эффектом затемнения основного фона страницы. Это уже не просто плагин, а целый мультимедийный «комбайн», если хотите. Великолепная работа во всех браузерах, адаптивная модель, готовые скины, бесплатная поддержка и обновления, все это и многое другое, делают iLightbox одним из лучших инструментов в этой линейке. Все достоинства плагина, в общем обзоре описывать нет смысла, лучше спокойно и более обстоятельно ознакомиться с ними на сайте разработчика.

 
iLightbox адаптивный плагин
 

 

Fresco

Fresco — привлекательный, я бы даже сказал, местами красивый и ко всему прочему функциональный представитель lightbox-плагинов. Разработан на jQuery, имеет стандартный набор свойств для плагинов этой серии. Полноэкранное увеличение изображений, интеграция видео с Youtube и Vimeo и полностью макет.

 
Fresco адаптивный Lightbox плагин jQuery
 

rlightbox2

Перед вами jQuery UI mediabox, который может отображать различные типы контента, такие как изображения, видео с YouTube и Vimeo. Плагин имеет парочку уникальных функций, таких как «панорама»(отображения части полноразмерного изображения на экране) и живое изменение размера картинки. В комплекте несколько готовых тем оформления и подробная документация.
 
rlightbox2 адаптивный Lightbox плагин
 

Chocolat

Базовый jQuery плагин lightbox, соответственно ничего примечательного и эффектного от этого плагина ждать не приходится, но со своей главной задачей справляется отлично. Минимализм в самых жестких его проявлениях, по мне так, даже черезчур.
 
Базовый jQuery плагин lightbox
 

Shadowbox JS

Shadowbox поддерживает все популярные форматы веб-публикаций, включая QuickTime, Flash видео, и Windows Media Player. Простейший способ использования Shadowbox это просмотр увеличенной версии одиночного изображения. Присутствует возможность организации довольно-таки динамичной галереи картинок и SWF роликов с автопрокруткой. Shadowbox способен отображать Flash с помощью флэш-плагина браузера Adobe Flash Player. Если Flash не доступен, пользователю будет предложено загрузить и установить его, прежде чем он сможет просмотреть содержимое.
 
Shadowbox JS адаптивный Lightbox плагин
 

Responsive Lightbox

Название этого плагина говорит само за себя, Responsive Lightbox полностью адаптивный, легкий jQuery lightbox плагин, заточенный исключительно на работу с изображениями.
 
Адаптивный Lightbox плагин
 
Вот такие замечательные инструменты, с помощью которых можно сделать свои сайты по настоящему динамичными, а просмотр материалов сайта пользователями, ещё более комфортным.

С Уважением, Андрей .

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

4 комментария
  1. Олег says:

    добрый день! У меня вопрос такого плана. Использую шаблон Elegant Photography WordPress Theme (тема понравилась, ее подпилил, поправил кое-какие стили, но оказалось, шаблон не обнавляется и адаптивной верстки нет). Это мой первый сайт и я веду там блог и пополняю портфолио фотографиями. Вебмастер гугл указал, что у меня нет мобильной версии, сайту скоро только 5 месяцев, но по НЧ запросам он начал проседать в выдаче. Шаблон не адаптивный и что делать, пока не знаю.

    Установил плагин wptouch, но он не показывает галерею. В самом шаблоне написано, что галерея вроде как Lightbox, т.е. есть вкладка с таким названием и в ней есть только возможность выбрать категорию постинга и указать названия и теги. Доступа к ее (галерея) настройкам нет из админки, вероятно автор шаблона как-то прикрутил эту галерею, т.к. в списке плагинов галерея не значится. Беда в том, что плагин wptouch сделал мобильной версией раздел со статьями, контакты, а вот галерею и Главную страницу с большим слайдером на ней просто не показывает. У меня размещено более 40 фотографий в портфолио и что делать, не знаю. Если установлю одну из указанных вами галерей, они будут отображаться нормально на мобильной версии и если так, они заведутся сами или что-то еще надо будет шаманить в плагине wptouch (бесплатная версия, функционал платной не указывает, что галерея с покупкой версии ПРО отобразится)? Прошу прощения, если не по теме, но буду рад вашей помощи! Спасибо!

    Ответить
    • Олег says:

      Проверил указанные вами первую партию галерей. Они единственное, что внесли — это возможность менять стиль окна и фон при развертывании фоток, также прикрепленные к статьям фотки начали открываться в окне галерей, однако протестировал 2-3 плагина, делающие мобильную версию сайта, ни один из них не отображает раздел меню ПОРТФОЛИО и все его странички. Показывается только меню (кнопки меню), внутри которых — тексты без картинок (карта сайта, контакты, блог). Жаль(

      Ответить
  2. Здравствуйте! Установил плагин responsive lightbox. Как настроить этот плагин таким образом, чтобы в посте размещались маленькие картинки, но при клике по ним окне лайт бокса открывалась большая картинка?

    Ответить
    • driver says:

      Здравствуйте, Алексей.

      Для галереи:

      <ul class="gallery"> <li><a href="sample_a.jpg"><img src="sample_a_thumb.jpg" alt="Image"></a></li> <li><a href="sample_b.jpg"><img src="sample_b_thumb.jpg" alt="Image"></a></li> <li><a href="sample_c.jpg"><img src="sample_c_thumb.jpg" alt="Image"></a></li> <li><a href="sample_d.jpg"><img src="sample_d_thumb.jpg" alt="Image"></a></li> </ul>

      Перед тегом заводите плагин:

      <script> // Инициировать Lightbox $(function() { $('.gallery a').lightbox(); }); </script>

      Если для одиночных картинок, можно так:

      <a href="myimage.jpg" rel="lightbox"><img src="myimage_thumb.jpg" alt="Image"></a>

      Тогда инициируете немного по-другому:

      <script> $(function() { $('[rel="lightbox"]').lightbox(); }); </script>

      Очень простой плагин и достаточная документация по использованию

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru