Лайтбокс : Lightbox Галерея : HTML JS Примеры

Lightbox: Применение

Галерея Lightbox

Чтобы применить компонент Lightbox, добавьте в контейнер атрибут uk-lightbox, чтобы превратить все анкоры внутри этого контейнера в ссылки лайтбокса.

<div uk-lightbox>
    <a href="image.jpg"></a>
</div>

Открыть Lightbox

<div uk-lightbox>
    <a class="uk-button uk-button-primary" href="images/photo.webp">Открыть Lightbox</a>
    <a href="images/dark.webp"></a>
</div>

Alt

Атрибут alt

Чтобы добавить атрибут alt к изображению в лайтбоксе, установите атрибут data-alt и пропишите в него необходимую информацию.

<div uk-lightbox>
    <a href="image.jpg" data-alt="Изображение"></a>
</div>

Открыть Лайтбокс

<div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.webp" data-alt="Изображение">Открыть Лайтбокс</a>
</div>

Описание под картинкой

Чтобы разместить текстовое описание, подпись внизу лайтбокса, установите атрибут data-caption и пропишите в него необходимую информацию.

<div uk-lightbox>
    <a href="image.jpg" data-caption="Описание"></a>
</div>

Открыть Лайтбокс

<div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.webp" data-caption="Описание, подпись. Красивая картинка">Открыть Лайтбокс</a>
</div>

По умолчанию галерея Lightbox использует анимацию slide. Вы можете изменить анимацию перелистывания добавив в опцию animation выбранное значение. Возможные значения slide, fade и scale.

<div uk-lightbox="animation: fade">
    <a href="image.jpg"></a>
</div>

Примеры Лайтбокс с использованием различных анимаций

Навигации

По умолчанию лайтбокс показывает навигацию slidenav ("Предыдущий" и "Следующий") из компонента Slidenav. Чтобы скрыть slidenav, установите параметр slidenav: false. Чтобы показать навигацию на основе элементов, например, из компонента Thumbnav или компонента Dotnav, установите для параметра nav значение thumbnav или dotnav.

<div uk-lightbox="slidenav: false; nav: thumbnav">
    <a href="image.jpg"></a>
</div>

Счётчик

Чтобы отобразить счетчик с текущим номером элемента и общим количеством элементов, добавьте параметр counter: true.

<div uk-lightbox="counter: true">
    <a href="image.jpg"></a>
</div>

Цветовой режим

Чтобы адаптировать цвет накладываемых элементов управления для лучшей видимости в зависимости от содержимого лайтбокса, используйте параметр data-attrs для добавления класса .uk-inverse-light или .uk-inverse.dark из компонента Inverse к изображению.

<div uk-lightbox>
    <a href="image.jpg" data-attrs="class: uk-inverse-light"></a>
</div>

Источники контента

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

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

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

<div uk-lightbox>
    <a class="uk-button" href="video.mp4" data-poster="image.jpg"></a>
    <a class="uk-button" href="https://www.youtube.com/watch?v=WhWc3b3KhnY"></a>
    <a class="uk-button" href="https://vimeo.com/1084537"></a>
    <a class="uk-button" href="https://www.google.com/maps"></a>
</div>

Изображение Видео YouTube Vimeo Google Maps

<div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.webp" data-caption="Изображение">Изображение</a>
    <a class="uk-button uk-button-default" href="/video/caminandes-llamigos.mp4" data-caption="Видео" data-poster="images/dark.webp">Видео</a>
    <a class="uk-button uk-button-default" href="https://www.youtube.com/watch?v=WhWc3b3KhnY" data-caption="YouTube">YouTube</a>
    <a class="uk-button uk-button-default" href="https://vimeo.com/1084537" data-caption="Vimeo">Vimeo</a>
    <a class="uk-button uk-button-default" href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12450.171988563416!2d-9.152682898287857!3d38.728300103894945!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933714bb401f5%3A0xa9b00861ee1aa2c2!2z0J_QsNGA0Log0K3QtNGD0LDRgNC00LAgVklJ!5e0!3m2!1sru!2sde!4v1561736427906!5m2!1sru!2sde" data-caption="Google Maps" data-type="iframe">Google Maps</a>
</div>

Примечание Используйте в ссылке на YouTube youtube-nocookie.com, и лайтбокс будет использовать домен для встраивания видео YouTube.

Тип контента

Указать тип контента

Lightbox использует атрибут href для определения типа связанного содержимого. Если в пути не указано расширение имени файла, просто добавьте атрибут data-type в тег <a>.

URL-ы YouTube и Vimeo будут обрабатываться автоматически.

Опция	Описание
`data-type="image"`	Тип контента - изображение.
`data-type="video"`	Тип контента - видео.
`data-type="iframe"`	Тип контента - обычный сайт.

Элементы управления: Задержка

По умолчанию элементы управления скрываются через некоторое время, если мышь не двигается. Установите параметр delay-controls: 0, чтобы всегда показывать элементы управления. Если необходимо, можно установить более длительную задержку.

<div uk-lightbox="delay-controls: 0">
    <a href="image.jpg"></a>
</div>

Открыть лайтбокс

<div uk-lightbox="delay-controls: 0">
    <a class="uk-button uk-button-default" href="images/photo.webp" data-caption="Подпись">Открыть лайтбокс</a>
</div>

Закрытие фоном

По умолчанию лайтбокс закрывается при нажатии на фон. Чтобы предотвратить такое поведение, установите параметр bg-close: false.

<div uk-lightbox="bg-close: false">
    <a href="image.jpg"></a>
</div>

Открыть лайтбокс

<div uk-lightbox="bg-close: false">
    <a class="uk-button uk-button-default" href="images/photo.webp" data-caption="Подпись">Открыть лайтбокс</a>
</div>

Пользовательские атрибуты

Вы можете добавлять пользовательские атрибуты к элементам контента лайтбокса, используя атрибут data-attrs, начиная с версии UIkit 3.4.0. Атрибуты передаются как обычные опции компонента, например data-attrs="width: 1280; height: 720;".

<div uk-lightbox>
    <a href="https://www.site.com/watch?vidos=123" 
       data-caption="YouBox" 
       data-attrs="width: 1600; height: 1280;">YouBox</a>
</div>

YouTube

<div uk-lightbox>
    <a class="uk-button uk-button-primary" href="https://www.youtube.com/watch?v=WhWc3b3KhnY" 
       data-caption="YouTube" data-attrs="width: 900; height: 480;">YouTube</a>
</div>

Пользовательский шаблон

Это шаблон лайтбокса по умолчанию:

<div class="uk-lightbox uk-overflow-hidden">
    <div class="uk-lightbox-items"></div>
    <div class="uk-position-top-right uk-position-small uk-transition-fade" uk-inverse>
        <button class="uk-lightbox-close uk-close-large" type="button" uk-close></button>
    </div>
    <div class="uk-position-center-left uk-position-medium uk-transition-fade" uk-inverse>
        <a class="uk-lightbox-slidenav" href uk-slidenav-previous uk-lightbox-item="previous"></a>
    </div>
    <div class="uk-position-center-right uk-position-medium uk-transition-fade" uk-inverse>
        <a class="uk-lightbox-slidenav" href uk-slidenav-next uk-lightbox-item="next"></a>
    </div>
    <div class="uk-position-center-right uk-position-medium" uk-inverse uk-toggle="cls: uk-position-center-right uk-position-bottom-center; mode: media; media: @s">
        <ul class="uk-lightbox-thumbnav uk-thumbnav uk-thumbnav-vertical" uk-toggle="cls: uk-thumbnav-vertical; mode: media; media: @s"></ul>
        <ul class="uk-lightbox-dotnav uk-dotnav uk-dotnav-vertical" uk-toggle="cls: uk-dotnav-vertical; mode: media; media: @s"></ul>
    </div>
    <div class="uk-lightbox-counter uk-text-large uk-position-top-left uk-position-small uk-transition-fade" uk-inverse></div>
    <div class="uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque"></div>
</div>

Чтобы переопределить шаблон лайтбокса по умолчанию, добавьте параметр template: #ID, чтобы связать его с элементом template с новым макетом лайтбокса.

<template id="js-lightbox-template">…</template>

<div uk-lightbox="template: #js-lightbox-template">…</div>

Параметры для атрибута

При использовании компонента Lightbox к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Lightbox

Опция	Значение	По умолчанию	Описание
`animation`	String	`slide`	Режим анимации лайтбокса: `slide`, `fade` или `scale`.
`autoplay`	Boolean	`false`	Автозапуск Lightbox. (Задержка в миллисекундах)
`autoplay-interval`	Number	`7000`	Задержка между переключением слайдов в режиме автовоспроизведения.
`pause-on-hover`	Boolean	`false`	Приостановить режим автозапуска при наведении.
`video-autoplay`	Boolean, String	`false`	Lightbox автовоспроизведение видео. Значение `inline` приводит к автовоспроизведению видео, делает его приглушенным и без элементов управления.
`counter`	Boolean	`false`	Лайтбокс показывает счетчик.
`nav`	Boolean, String	`false`	Навигация по лайтбоксу (`dotnav`, `thumbnav`).
`slidenav`	Boolean	`true`	Лайтбокс показывает элементы управления slidenav.
`index`	String, Number	`0`	Отображаемый элемент лайтбокса. Индекс начинается с 0.
`delay-controls`	Number	`3000`	Время задержки до исчезновения элементов управления в мс. Установка `0` предотвратит скрытие элементов управления.
`toggle`	CSS selector	`a`	Селектор переключателя - открывает панель лайтбокса при нажатии.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

// Применить лайтбокс к группе ссылок
UIkit.lightbox(element, options);

// Для динамической инициализации панели лайтбокса
UIkit.lightboxPanel(panelOptions);

Методы

Для компонента доступны следующие методы:

Show

UIkit.lightbox(element).show(index);

Показывает панель и элемент лайтбокса.

Hide

UIkit.lightbox(element).hide();

Скрывает панель лайтбокса.

Если вы хотите использовать панель лайтбокса только через API JS, вы можете установить следующие параметры.

Опция	Значение	По умолчанию	Описание
`animation`	String	`slide`	Режим анимации лайтбокса: `slide`, `fade` или `scale`.
`autoplay`	Boolean	`false`	Автозапуск Lightbox.
`autoplay-interval`	Number	`7000`	Задержка между переключением слайдов в режиме автозапуска.
`pause-on-hover`	Boolean	`false`	Приостановить режим автовоспроизведения при наведении.
`video-autoplay`	Boolean, String	`false`	Автозапуск видео лайтбокса. Значение `inline` приводит к автовоспроизведению видео, делает его приглушенным и без элементов управления.
`counter`	Boolean	`false`	Лайтбокс показывает счетчик.
`nav`	Boolean, String	`false`	Навигация по лайтбоксу (`dotnav`, `thumbnav`).
`slidenav`	Boolean	`true`	Лайтбокс показывает элементы управления slidenav.
`index`	Number	`0`	Начальный элемент для отображения. (начало с нуля)
`velocity`	Number	`2`	Скорость анимации (пиксель / мс).
`preload`	Number	`1`	Количество элементов для предварительной загрузки. (слева и справа от текущего активного элемента)
`items`	Array	`[]`	Массив элементов для отображения, например, `[{source: 'images/size1.jpg', caption: '900x600'}]`
`template`	String	Разметка по умолчанию	Строка шаблона.
`delay-controls`	Number	`3000`	Время задержки до исчезновения элементов управления в мс. Установка `0` предотвратит скрытие элементов управления.
`container`	String	`body`	Определите целевой контейнер с помощью селектора, чтобы указать, где Lightbox должен быть добавлен в DOM.

События

Следующие события будут инициированы для элементов компонента «Lightbox»:

Имя события	Описание
`beforeshow`	Срабатывает до появления лайтбокса.
`beforehide`	Срабатывает до того, как лайтбокс скрыт.
`show`	Срабатывает после показа лайтбокса.
`shown`	Срабатывает после завершения анимации Lightbox.
`hide`	Fires after the Lightbox's hide animation has started.
`hidden`	Срабатывает после того, как лайтбокс скрыт.
`itemload`	Срабатывает, когда элемент загружается.
`beforeitemshow`	Срабатывает до показа элемента.
`itemshow`	Срабатывает после показа элемента.
`itemshown`	Запускается после завершения анимации показанного элемента.
`beforeitemhide`	Срабатывает до того, как элемент скрыт.
`itemhide`	Срабатывает после скрытия элемента и запуска анимации.
`itemhidden`	Запускается после скрытия предмета и завершения анимации.

Методы

Для компонента доступны следующие методы:

Show

UIkit.lightboxPanel(element).show(index);

Показывает панель лайтбокса и элемент.

Название	Тип	По умолчанию	Описание
`index`	String, Number	0	Элемент лайтбокса для отображения. Индекс начинается с 0.

Hide

UIkit.lightboxPanel(element).hide();

Скрывает панель лайтбокса.

startAutoplay

UIkit.lightboxPanel(element).startAutoplay();

Запускает автозапуск лайтбокса.

stopAutoplay

UIkit.lightboxPanel(element).stopAutoplay();

Останавливает автозапуск лайтбокса.

Доступность

Компонент Lightbox соответствует Dialog (Modal) Pattern и Carousel (Slide Show or Image Rotator) Pattern и втоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

Лайтбокс имеет роль dialog, свойство aria-modal и aria-roledescription свойство содержит carousel.
Список слайдов имеет идентификатор (ID), роль presentation и свойство aria-live.
Слайды имеют идентификатор (ID), роль group, aria-roledescription свойство установленное на идентификатор списка слайдов и aria-label свойство.

Предыдущая/следующая навигация придерживается Button Pattern.

Элементы навигации prev/next имеют роль button, aria-controls свойство установленное на идентификатор списка слайдов, и свойство aria-label.

Компонент Close автоматически устанавливает соответствующие роли и свойства WAI-ARIA.

Значок закрытия имеет свойство aria-label, а если используется элемент <a>, то роль button.

Взаимодействие с клавиатурой

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

Клавиши left/right arrow перемещаются по слайдам. Если фокус находится на последнем слайде, он перемещается на первый слайд.
Клавиши home или end перемещают фокус на первый или последний слайд.
Кнопка esc закрывает лайтбокс.

Интернационализация

Компонент Lightbox использует следующие строки перевода:
Ключ	По умолчанию	Описание
`next`	`Next Slide`	`aria-label` для кнопки следующего слайда.
`previous`	`Previous Slide`	`aria-label` для кнопки предыдущего слайда.
`slideLabel`	`%s of %s`	`aria-label` для слайда.
`close`	`Close`	`aria-label` для кнопки закрытия.

Подробнее о переводе компонентов.

Компонент Лайтбокс

Lightbox: Применение

Галерея Lightbox

Alt

Атрибут alt

Описание под картинкой

Анимации

Примеры Лайтбокс с использованием различных анимаций

Навигации

Thumbnav

Dotnav

Счётчик

Цветовой режим

Источники контента

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

Тип контента

Указать тип контента

Элементы управления: Задержка

Закрытие фоном

Пользовательские атрибуты

Пользовательский шаблон

Параметры для атрибута

Опции компонента

Lightbox

JavaScript

Инициализация

Методы

Show

Hide

События

Методы

Show

Hide

startAutoplay

stopAutoplay

Доступность

Взаимодействие с клавиатурой

Интернационализация

Галерея Lightbox

Атрибут alt

Примеры Лайтбокс с использованием различных анимаций

Thumbnav

Dotnav

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

Указать тип контента

Опции компонента

Lightbox

Инициализация

Методы

Show

Hide

Параметры панели лайтбокса

События

Методы

Show

Hide

startAutoplay

stopAutoplay

Взаимодействие с клавиатурой

Интернационализация