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

13 января 2016 3 281

Каждый верстальщик знает, что такое 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_heightbooleantrueМасштабирование высоты
remotestringЕсли вы не хотите использовать HREFdata-remote
gallerystringГруппировка элементовdata-gallery
gallery_parent_selectorstringdocument.bodyИспользуется при выводе нескольких галерей на страницеdata-parent
left_arrow_classstring.glyphicon .glyphicon-chevron-leftКласс стрелки назад
right_arrow_classstring.glyphicon .glyphicon-chevron-rightКласс стрелки вперед
typestringПринудительный тип контента (фото или видео)data-type
widthintegerШирина видеоdata-width
always_show_closebooleantrueВсегда показывать кнопку закрытия
loadingMessagestringLoading…Сообщение о загрузке
no_relatedbooleanfalseНе показывать похожие видео по окончаниюdata-norelated

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

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

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

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

Подпишитесь на рассылку и получайте новые материалы на электронную почту

Иван Данилин

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

Добавить комментарий

Премиум-темы для Вордпресс с русскоговорящей поддержкой
Подробнее