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

Каждый верстальщик знает, что такое Twitter Bootstrap. Можно долго спорить в необходимости его использования. Бесспорно то, что Bootstrap очень прост в использовании, сильно экономит время верстальщика, отлично адаптируется под любые разрешения, совместим со всеми браузерами, полностью открыт и бесплатен.

Кроме этого, используя фреймворк в команде сильно упрощается взаимодействие за счёт хоть какой-то стандартизации вёрстки.

Twitter Bootstrap

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

Скачать

В Bootstrap встроены практически все необходимые современному сайту JavaScript-компоненты. В том числе и модальные окна, без которых сейчас уже не обходится ни один проект. Что совершенно не удивляет, потому что с помощью них можно добавить в интерфейс сайта различные удобные штуки, сильно повышающие юзабилити. В том числе и т.н. лайтбоксы для отображения изображений.

Но можно пойти ещё дальше и установить дополнение с говорящим за себя названием Lightbox for Bootstrap 3. Что позволит существенно расширить возможности модальных окон конкретно в части использования их в качестве лайтбоксов.

Lightbox for Bootstrap 3

Дополнение, расширяющее возможности модальных окон Twitter Bootstrap 3. Позволяет выводить в лайтбоксах изображения, галереи и видео.

Скачать

Подключение

Подключение Lightbox for Bootstrap 3 осуществляется стандартным способом. Например, с CDN:

<a href="someurl" data-toggle="lightbox">Открыть окно</a>

Подразумевается, что на странице уже подключены jQuery и Bootstap.

Использование

С помощью data-атрибутов HTML5

<a href="someurl" data-toggle="lightbox">Открыть окно</a>

С помощью JavaScript

<a href="someurl" id="mylink">Открыть окно</a>
$('#mylink').ekkoLightbox(options);

Имплементация

$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
	event.preventDefault();
	$(this).ekkoLightbox();
});

Опции

Используются как стандартные опции модальных окон Bootstrap 3, так и целый ряд собственных.

Имя	тип	по-умолчанию	описание	data-*
scale_height	boolean	true	Масштабирование высоты
remote	string		Если вы не хотите использовать HREF	data-remote
gallery	string		Группировка элементов	data-gallery
gallery_parent_selector	string	document.body	Используется при выводе нескольких галерей на странице	data-parent
left_arrow_class	string	.glyphicon .glyphicon-chevron-left	Класс стрелки назад
right_arrow_class	string	.glyphicon .glyphicon-chevron-right	Класс стрелки вперед
type	string		Принудительный тип контента (фото или видео)	data-type
width	integer		Ширина видео	data-width
always_show_close	boolean	true	Всегда показывать кнопку закрытия
loadingMessage	string	Loading…	Сообщение о загрузке
no_related	boolean	false	Не показывать похожие видео по окончанию	data-norelated

Примеры использования можно увидеть на странице разработчика на GitHub.

Напомню, самый большой выбор дополнений для Bootstrap можно найти на CodeCanyon, а самые лучшие темы для WordPress с поддержкой Bootstrap традиционно на ThemeForest.

Подпишитесь на мой телеграм и первыми получайте новые материалы, в т.ч. которых нет на сайте.

Лучшее за неделю

Как выбрать качественную тему Вордпресс

На что обратить внимание перед покупкой, чтобы не пришлось покупать другую
Как самостоятельно создать сайт на Вордпресс

Подробная инструкция по созданию сайтов на Вордпресс для начинающих