Лайтбоксы для 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:
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
Подразумевается, что на странице уже подключены 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.
