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

Компонент Лайтбокс полностью отзывчивый и поддерживает сенсорную и свайп (swipe) навигацию, а также перелистывание мышью на ПК. При переходах между слайдами анимация буквально прилипает к кончику пальца или курсору мыши. Чувствительность на высоте! Быстро нажимая на предыдущую и следующую навигацию, анимация будет ускоряться, чтобы не отставать от вашего темпа. Для более плавной работы все анимации аппаратно-ускоренные.

Использование. Галерея Lightbox

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

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

Атрибут alt

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

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

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

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

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

Анимации

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

<div uk-lightbox="animation: fade">
    <a href="image.jpg"></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>

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

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

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

Параметры компонента

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

Lightbox

JavaScript

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

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

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

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

Методы

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

Show

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

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

Hide

UIkit.lightbox(element).hide();

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

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

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

События

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

Методы

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

Show

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

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

Hide

UIkit.lightboxPanel(element).hide();

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

startAutoplay

UIkit.lightboxPanel(element).startAutoplay();

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

stopAutoplay

UIkit.lightboxPanel(element).stopAutoplay();

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