Адаптивная галерея в модальном окне Lightbox Bootstrap

Адаптивная галерея в модальном окне

Адаптивная галерея для сайта Lightbox которая загружается в модальном окне, для примера используется возможность применения с плагином Bootstrap, сделано описание по установке и настройке плюс демо примеры.

Подключение и настройка адаптивной галереи Lightbox Bootstrap

Подключение адаптивной галереи Lightbox Bootstrap

Подключаются 2 внешних файла, скрипт и файл стилей, описан способ подключения в теле документа, другими словами вместе с кодом самой галереи.

<style>
@import url("http://atmpl.ru/design/galleries/2015/lightbox/lightbox.css");
/* Bootstrap */
.gallery-bts img {max-width:100%}
.gallery-bts{margin-top:2em;padding-bottom:3em}
</style>
<script src="http://atmpl.ru/design/galleries/2015/lightbox/lightbox.js"></script>

Настройка адаптивной галереи Lightbox Bootstrap

Настройка атрибутов кода галереи

class="example-image-link"
Обязательный класс, указывает на адрес изображения для линка.
data-lightbox="example-set"
Атрибут для изображений находящихся в группе, для подключения элементов перелистывания.
data-lightbox="example-1"
Атрибут для индивидуальных изображений, каждому последующему устанавливается новое значение.
data-title="Описание изображения"
Атрибут для добавления описания изображению(ям).
class="example-image"
Обязательный класс для тега изображения.

Настройка скрипта управления галереи

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

<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>

Функции настройки галереи

alwaysShowNavOnTouchDevices
По умолчанию false, если true, тогда левую и правую навигационные стрелки, которые появляются при наведении мыши при просмотре изображения наборы всегда будут видны на устройствах, поддерживающих сенсор.
fadeDuration
По умолчанию 500, устанавливается время появления галереи, значение в миллисекундах.
fitImagesInViewport
По умолчанию true, разрешить изменять размеры изображений, что бы продлить за пределами области просмотра, так что бы они вписывались внутри него. Это избавляет пользователя от необходимости прокручивать, чтобы увидеть все изображения. Чтобы отключить функцию используйте false.
maxWidth
Вы можете установить числовое значение в пикселях максимальной ширины элемента.
maxHeight
Вы можете установить числовое значение в пикселях максимальной высоты элемента.
positionFromTop
При необходимости можно установить числовое значение в пикселях для отступа от верхней части страницы.
resizeDuration
По умолчанию 700, устанавливается время, необходимое для окна галереи, чтобы изменить его ширину и высоту при переходе между разными размерами изображения в миллисекундах.
showImageNumberLabel
По умолчанию true, если false, то текст, указывающий номер текущего изображения и общее количество изображений в наборе (изображение 2 из 4) будут спрятаны.
wrapAround
По умолчанию false, если true, когда пользователь достигает последнего изображения в наборе, справа навигационная стрелка появится, и они будут продолжать двигаться вперед, который переместит их обратно на первое изображение в наборе.

Демо примеры адаптивной галереи Lightbox Bootstrap

Просмотр отдельных изображений галереи Lightbox Bootstrap

Показ отдельного изображения без описания

Показ отдельного изображения с описанием

Просмотр групповых изображений галереи Lightbox Bootstrap

Показ групповых изображений без описания

Показ групповых изображений с описанием

Скачать адаптивную галерею Lightbox Bootstrap

Для скачивания предлагается оригинальный файл источника галереи.

Скачать адаптивную галерею

Информация галереи Lightbox Bootstrap

  1. Версия галереи: v2.8.0
  2. Лицензия: The MIT License

Рейтинг: 5.0/5 из 2



Добавлено Автор Ник Источник Просмотров Комментариев Теги
03-10-2015 Михаил Меренков aTmpl © 1179 0 галерея в окне, адаптивная галерея, галерея bootstrap