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

Создайте адаптивную эффектную галерею с использованием красивой анимации. Потрясающий лайтбокс для изображений и видео с широкими возможностями. Использование. Примеры.

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

Применение

Галерея Lightbox

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

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

  • <div uk-lightbox>
    <a class="uk-button uk-button-primary" href="/demo/img/photo.jpg">Открыть Lightbox</a>
    <a href="/demo/img/dark.jpg"></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="/demo/img/photo.jpg" 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="/demo/img/photo.jpg" 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="/demo/img/photo.jpg" data-caption="Отличного настроения!">
            <img src="/demo/img/photo.jpg" width="450" height="300" alt="Тестовое изображение" loading="lazy">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/demo/img/dark.jpg" data-caption="Всё прекрасно!">
            <img src="/demo/img/dark.jpg" width="450" height="300" alt="Тестовое изображение" loading="lazy">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/demo/img/light.jpg" data-caption="Да всё супер!">
            <img src="/demo/img/light.jpg" width="450" height="300" alt="Тестовое изображение" loading="lazy">
        </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="/demo/img/photo.jpg" data-caption="Да всё супер!">
            <img src="/demo/img/photo.jpg" width="450" height="300" alt="Тестовое изображение" loading="lazy">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/demo/img/dark.jpg" data-caption="Отличного настроения!">
            <img src="/demo/img/dark.jpg" width="450" height="300" alt="Тестовое изображение" loading="lazy">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/demo/img/light.jpg" data-caption="Всё прекрасно!">
            <img src="/demo/img/light.jpg" width="450" height="300" alt="Тестовое изображение" loading="lazy">
        </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="/demo/img/photo.jpg" data-caption="Вот это счастье">
            <img src="/demo/img/photo.jpg" width="450" height="300" alt="Тестовое изображение" loading="lazy">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/demo/img/dark.jpg" data-caption="Надпись под изображением">
            <img src="/demo/img/dark.jpg" width="450" height="300" alt="Тестовое изображение" loading="lazy">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/demo/img/light.jpg" data-caption="А вот и хорошо!">
            <img src="/demo/img/light.jpg" width="450" height="300" alt="Тестовое изображение" loading="lazy">
        </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>

  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="/demo/img/photo.jpg" data-caption="Изображение">Изображение</a>
    <a class="uk-button uk-button-default" href="/storage/app/media/demo-video/caminandes_llamigos.mp4" data-caption="Видео" data-poster="/demo/img/dark.jpg">Видео</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" Тип контента - обычный сайт.

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

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

  • <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

Опция Значение По умолчанию Описание
animation String slide Режим анимации лайтбокса: slide, fade или scale.
autoplay Boolean false Автозапуск Lightbox. (Задержка в миллисекундах)
autoplay-interval Number 7000 Задержка между переключением слайдов в режиме автовоспроизведения.
pause-on-hover Boolean false Приостановить режим автозапуска при наведении.
video-autoplay Boolean false Lightbox автовоспроизведение видео.
index String, Number 0 Отображаемый элемент лайтбокса. Индекс начинается с 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 false Автозапуск видео лайтбокса.
index Number 0 Начальный элемент для отображения. (начало с нуля)
velocity Number 2 Скорость анимации (пиксель / мс).
preload Number 1 Количество элементов для предварительной загрузки. (слева и справа от текущего активного элемента)
items Array [] Массив элементов для отображения, например, [{source: 'images/size1.jpg', caption: '900x600'}]
template String Default markup Строка шаблона.
delay-controls Number 3000 Время задержки до исчезновения элементов управления в мс.
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.

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 для кнопки закрытия.

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