Лайтбокс
Создать необычный лайтбокс для изображений и видео с использованием Модальный компонент.
Использование
Для установки этого компонента, добавить data-uk-lightbox
атрибут к якорю ссылки на изображение, которое вы хотите отобразить. Если атрибут title не существует, он будет отображаться в качестве заголовка для лайтбокса.
Пример
Откройте лайтбоксРазметки
<a href="my-image.jpg" data-uk-lightbox title="">...</a>
Групп
Вы можете связать несколько изображений для того же лайтбокс и переключаться между ними внутри лайтбокса, тем самым создавая галерею. Просто добавить {group:'my-group'}
опция для данных атрибутов каждого элемента, используя то же имя для всех элементов, которые требуется сгруппировать. Обязательно укажите CSS от Slidenav компонент, Так что вы можете перемещаться между элементами.
Пример
Разметки
<a href="" data-uk-lightbox="{group:'my-group'}">...</a>
Разные источники Контента
Лайтбокс не ограничивается изображениями. Другие СМИ, как и видео, могут быть отображены внутри лайтбокса и она будет автоматически генерировать правильный вывод, оценивая свой путь.
Пример
Изображения МР4 Вимео На YouTube Элемент iframe
Типы Контента
Если расширение имени файла определяется в путь образа, просто добавьте data-lightbox-type="image"
атрибута. Это работает также и для видео. Типа контент iframe будет автоматически для URL-адреса, заканчивающиеся на .html
или .php
. Чтобы заставить элемент iframe, добавить атрибут data-lightbox-type="iframe"
.
JavaScript варианты
Вариант | Возможное значение | По умолчанию | Описание |
---|---|---|---|
group |
string | false | Группа имя группы элементов в виде галереи, чтобы показать |
allowfullscreen |
boolean | true | Есть ли встроенное видео, можно включить полноэкранный режим или нет (добавляет allowfullscreen атрибут фреймы) |
duration |
integer | 400 | Длительность анимации между галереей пункт изменить |
keyboard |
boolean | true | Разрешить использование клавиатуры для навигации |
Инициализации элементов вручную
var lightbox = UIkit.lightbox(element, { /* options */ });
Создать динамический лайтбокс
var lightbox = UIkit.lightbox.create([
{'source': 'http://url/to/video.mp4', 'type':'video'},
{'source': 'http://url/to/image.jpg', 'type':'image'}
]);
lightbox.show();
События
Название | Параметр | Описание |
---|---|---|
showitem.uk.lightbox |
event, data | На лайтбокс показать |