Лайтбокс

Создайте модный лайтбокс для изображений и видео, в основе которого используется компонент 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>