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

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>

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

• Результат
• Разметка

Slide

Fade

Scale

<div class="uk-h3">Slide</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: slide">
    <div>
        <a class="uk-inline" href="images/photo.webp" data-caption="Отличного настроения!">
            <img src="images/photo.webp" width="450" height="300" loading="lazy" alt="Тестовое изображение">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.webp" data-caption="Всё прекрасно!">
            <img src="images/dark.webp" width="450" height="300" loading="lazy" alt="Тестовое dark изображение">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.webp" data-caption="Да всё супер!">
            <img src="images/light.webp" width="450" height="300" loading="lazy" alt="Тестовое light изображение">
        </a>
    </div>
</div>
<div class="uk-h3">Fade</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: fade">
    <div>
        <a class="uk-inline" href="images/photo.webp" data-caption="Да всё супер!">
            <img src="images/photo.webp" width="450" height="300" loading="lazy" alt="Тестовое изображение">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.webp" data-caption="Отличного настроения!">
            <img src="images/dark.webp" width="450" height="300" loading="lazy" alt="Тестовое dark изображение">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.webp" data-caption="Всё прекрасно!">
            <img src="images/light.webp" width="450" height="300" loading="lazy" alt="Тестовое light изображение">
        </a>
    </div>
</div>
<div class="uk-h3">Scale</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: scale">
    <div>
        <a class="uk-inline" href="images/photo.webp" data-caption="Вот это счастье">
            <img src="images/photo.webp" width="450" height="300" loading="lazy" alt="Тестовое изображение">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.webp" data-caption="Надпись под изображением">
            <img src="images/dark.webp" width="450" height="300" loading="lazy" alt="Тестовое dark изображение">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.webp" data-caption="А вот и хорошо!">
            <img src="images/light.webp" width="450" height="300" loading="lazy" alt="Тестовое light изображение">
        </a>
    </div>
</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-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>

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

При использовании компонента 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, вы можете установить следующие параметры.

События

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

Методы

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

Show

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

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

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 закрывает лайтбокс.

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

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