Лайтбокс

Создайте модный лайтбокс для изображений и видео, в основе которого используется компонент Modal, который изначально включен в базовую сброку UIkit 2.

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

Чтобы применить компонент Lightbox, в основе которого используется компонент Modal, добавьте атрибут data-uk-lightbox к ссылке, ссылающейся на изображение, которое вы хотите продемонстрировать. Если атрибут заголовка существует, он будет отображаться в качестве заголовка лайтбокса.

Пример

Открыть Lightbox

Разметка

<a href="my-image.jpg" data-uk-lightbox title="Заголовок">...</a>

Группы

Вы можете связать несколько изображений в один и тот же лайтбокс и переключаться между ними внутри лайтбокса, создавая тем самым галерею. Просто добавьте параметр {group:'my-group'} в атрибут данных каждого элемента, используя одно и то же имя для всех элементов, которые вы хотите сгруппировать.

Примечание Не забудьте включить CSS из компонента Slidenav, чтобы вы могли перемещаться между элементами.

Пример

Разметка

<a href="" data-uk-lightbox="{group:'my-group'}">...</a>

Различные источники контента

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

Пример

Изображение MP4 Vimeo YouTube Iframe

Разметка

<a href="" data-uk-lightbox="{group:'my-group_2'}">...</a>
<a href="" data-uk-lightbox="{group:'my-group_2'}">...</a>
....

Типы контента

Если расширение имени файла не определено в пути к изображению, добавьте атрибут data-lightbox-type="image". Это работает и для видео. Тип содержимого iframe будет автоматически определяться для URL, заканчивающихся на .html или .php. Чтобы принудительно установить iframe, добавьте атрибут data-lightbox-type="iframe".

JavaScript options

Option	Possible value	Default	Описание
`group`	string	false	Имя группы в группе элементов галереи для отображения
`allowfullscreen`	boolean	true	Может ли встроенное видео переключаться в полноэкранный режим или нет (добавляет атрибут `allowfullscreen` в Iframes)
`duration`	integer	400	Продолжительность анимации между сменой элемента галереи
`keyboard`	boolean	true	Разрешить навигацию с клавиатуры

Init element manually

var lightbox = UIkit.lightbox(element, { /* options */ });

Create dynamic lightbox

var lightbox = UIkit.lightbox.create([
    {'source': 'http://url/to/video.mp4', 'type':'video'},
    {'source': 'http://url/to/image.jpg', 'type':'image'}
]);

lightbox.show();

Events

Name	Parameter	Description
`showitem.uk.lightbox`	event, data	On lightbox show

Добавляем компонент «Lightbox» к проекту

<script src="/../js/components/lightbox.min.js" async></script>