Лайтбокс

Создать необычный лайтбокс для изображений и видео с использованием Модальный компонент.

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

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

Инициализации элементов вручную

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();
                            

События