Веб-дизайн и поисковая оптимизация. Самые лучшие плагины lightbox для Wordpress

На iOS - iPhone, iPod touch 25.05.2019

На iOS - iPhone, iPod touch

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

Зависимость : 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

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

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

Займемся созданием фотогалереи на основе плагина к jQuery называемого Lightbox . В результате у нас должно получится красивое отображение увеличенных изображений в отдельном Ajax окне со средствами навигации на следующее изображение или предыдущее.

Для начала обзаведемся самим скриптом плагина. Скачать весь архив можно по этой ссылке .

Как только скачали архив, залейте на свой хост следующие файлы сборки lightbox:

jquery.lightbox.js
lightbox.css

Теперь нужно подключить lightbox к странице. Для этого пропишите в теле HEAD (для пользователей UCOZ после тега) следующий код, предварительно заменив адреса на то местоположение, куда вы залили файлы:

.lightbox.js" type="text/javascript">
.css" type="text/css">

Если ваш сайт создан на базе UCOZ, то первую строку кода писать не надо. jQuery на UCOZ подключен по умолчанию.

Теперь подготовим изображения. В примере 1 альбом из 4-х изображений:

Изображения нужно обернуть в ссылку с определенным классом (в примере - lightbox-gal-1). Если это галерея, а не отдельное изображение, то для этих ссылок нужно установить атрибут REL (в примере - gallery1). Если на странице несколько галерей, то свойство REL для каждой галереи должен быть свой. Скажем, для первой галереи свойство REL имеет значение gallery1, а для второй галереи - gallery2.

Теперь lightbox нужно запустить. Для этого в теле HEAD пишем следующий код:

fitToScreen: true
});
});

Для работы lightbox этого достаточно. Все стилевое оформление делается через файл lightbox.css, который залили ранее. Там же можете изменить изображение перехода к следующему и предыдущему изображению (параметр #prevLink и #nextLink, соответственно).

И немного о параметрах, которые можно использовать при вызове lightbox . Эти параметры помогут изменить функционал вашей галереи.

Параметры прописываются через запятую внутри функции вызова lightbox . В примере использован один параметр. Это - fitToScreen. Существуют еще следующие параметры:

Параметр	Тип	Пояснение
Строка	Изображение, которое будет показано, пока рисунок грузится (бегунок).
fileBottomNavCloseImage	Строка	Изображение закрытия галереи.
overlayOpacity	0-1	Прозрачность фона.
borderSize	Число	Размер бордюра окна, которое будет разделять край окна и рисунок.
resizeSpeed	Число	Скорость изменения размера окна.
widthCurrent	Число	Размер окна по ширине до изменения размера.
heightCurrent	Число	Размер окна по высоте до изменения размера.
displayTitle	Логическое	Отображение заголовка изображения.
navBarSlideSpeed	Число	Скорость смены изображения.
displayHelp	Логическое	Показывать помощь по использованию.
fitToScreen	Логическое	Изменять размер окна под изображение.
disableNavbarLinks	Логическое	Показывать ссылки навигации.
loopImages	Логическое	Циклическое прокручивание.
imageClickClose	Логическое	Закрывать галерею при клике на картинке.
strings	Объект	Строки. Используется для перевода текста в окне на родной язык.

Объект strings имеет следуюшие параметры:

Если вам непонятно, как прописать эти параметры в скрипт lightbox , то вот пример:

$(document).ready(function(){
$(".lightbox-gal-1").lightbox({
fitToScreen: true,
imageClickClose: false,
fileLoadingImage: "/images/lightbox/loading.gif",
fileBottomNavCloseImage: "/images/lightbox/closelabel.gif",
strings:{
prevLinkTitle: "Предыдущий рисунок",
nextLinkTitle: "Следующий рисунок",
prevLinkText: "« Назад",
nextLinkText: "Вперед »",
closeTitle: "Закрыть галерею",
image: "Рисунок ",
of: " из "
}
});
});

На этом все. Удачного всем дня!

Вы можете присоедениться к моему микроблогу в Твиттере

Самой популярной библиотекой является 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

Подобные плагины, но это было уже довольно давно. Давайте взглянем на подборку наиболее актуальных Lightbox плагинов на сегодня и кратенько, для новичков, вначале напомним, что это и для чего они нужны.

Учитывая тот факт, что картинки и видео то, что в большей мере делает сайт привлекательным для посетителя, можно сказать, что медиа менеджмент в WordPress – это очень популярный тренд. Если на вашем сайте много картинок, и вы хотите, чтоб ваш медиа контент выглядел максимально привлекательно на экранах всех девайсов, то вы можете воспользоваться одним из множества предложенных lightbox –плагинов для WordPress.

Просто говоря — если картинка или видео выскакивает на вас из глубины экрана, оставляя позади всю остальную страницу, то это и есть функция lightbox. Lightbox´ы могут быть реализованы посредством скриптов, созданных на основе JavaScript(jQuery) или CSS3, с внедрением элегантного соответствия вашему дизайну. Lightbox фокусирует внимание именно на визуальном контенте, подсвечивая его. Так что таким образом можно оформлять формы ввода информации, новостные письма, слайды и многое другое. Если у вас фото-блог, то вы и вовсе читаете правильный пост.

Вы хотите, чтоб посетители оставались на той же странице, вместо того, чтоб переадресовывать их на новый таб, если те хотят ознакомиться с видео или картинкой.
Вы желаете спровоцировать рост пользовательской вовлеченности, используя социальные элементы.
Таким образом, вы можете облегчить работу с сайтом, который нагружен тяжелыми медиа-элементами.
Хороший способ увеличить конверсию сайта.

Хороший WordPress разработчик может легко создать кастомное всплывающее окно, но есть и другие способы добавить lightbox-эффект на ваш сайт, и, конечно же, лучший из них – это плагин. И мы выбрали самые лучшие расширения из сотен предложенных вариантов.

– это один из моих любимчиков. Он предлагает вам целый спектр возможностей для управления медиа, к примеру, вы можете не только изменить размер картинок, но и изменить расположение кнопок для более удобной навигации. Если вы используете Foo Gallery, то вы уже хорошо знакомы с FooPluigns. Благодаря встроенным инструментам для работы с соц. сетями, отзывчивому дизайну и Zeroconf, этот плагин способен сделать работу в интернете более приятной и простой.

Вы также можете попробовать PRO версию FooBox и получить доступ к продвинутым функциям, типа внешнего связывания, поддержки HTML и iFrame, большого количества цветовых схем, иконок-кнопок, иконок-загрузчиков и многому другому.

Responsive Lightbox разработан главным образом для создания отзывчивых лайтбоксов, которые дружественны к мобильным девайсам. Лайтбоксы, созданные этим плагином, могут изменять свои размеры согласно требованиям экрана устройства. Плагин примечателен своими шестью разными отзывчивыми скриптами (SwipeBox, prettyPhoto, FancyBox, Nivo Lightbox, и Image Lightbox), которые добавляют эффекты перекрытия к вашим медиа-элементам.

– это хорошая альтернатива для тех, кто ищет lightbox-плагин попроще. Разработчик плагина (Archetyped) предпочитает не усложнять жизнь пользователя и не предлагает тому поломать голову над длинным списком опций кастомизации. Среди опций вы найдете рисайзинг lightbox-окон, простую кастомизацию лайтбокс-эффектов, клавиатурную навигацию по изображениям и т.д.

Вы также можете внедрить lightbox-функцию на определенные записи или страницы. Более того, метаданные также отображаются вместе с медиа файлами.

– еще один бесплатный оптимизированный для мобильных устройств плагин для отображения контента с эффектом lightbox. Плагин предлагает вам несколько уникальных функций, которые вы не найдете у его конкурентов. Среди таких уникальных функций вы найдете функцию изменения расположения информации, уменьшение крупных изображений, отображение ссылок для загрузки изображений и т.д. Плагин идет с пятью разными темами, и вы можете показать и само изображение, и его описание в лайтбоксе. Изображения можно сгруппировать и показывать, как слайдшоу.

Плагин готов к использованию сразу после установки, но при желании можно изменить его настройки. Все, что нужно, чтоб начать работу с расширением, это предустановленные шорткоды. Вы можете включить lightbox-эффект в секции комментариев.

— супер легкий jQuery lightbox плагин, который содержит всего лишь 400 строк JavaScript, 100 строк CSS, и утяжеляет вашу страницу всего на 6 KB.

WP Featherlight помогает избежать всех тех проблем с производительностью сайта, которые возникают в случае использования более тяжелых его аналогов. Это становится возможным благодаря предустановленной jQuery-библиотеке, которая и устраняет проблемы производительности. Плагин отзывчивый, а также поддерживает картинки, AJAX, iFrame и т.д.

Lightbox – это сегодня наиболее интуитивный метод отображения медиа контента на современных WordPress-сайтах. Таким образом, хорошо кастомизируемый lightbox-плагин может сделать нахождение на вашем сайте более приятным и продуктивным.

→ 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 для Wordpress

Рекомендуем почитать

Поиск по сайту