Лайтбокс

Создайте адаптивную галерею лайтбоксов с изображениями и видео.

Новый компонент Lightbox — комплексная функция для быстрого создания галерей изображений и видео. Посетители могут прокручивать изображения, используя сенсорную и проводную навигацию, а на не сенсорных устройствах они могут применять обычное перетаскивание мышью. Кроме того, клавиатура так же может применяться. Благодаря аппаратно ускоренным переходам CSS3, вы можете выбрать один из трех основных эффектов для создания плавной анимации при переходе по галерее Lightbox: Slide, Fade и Scale.

Компонент лайтбокса полностью совместимм с событиями сенсорных экранов и пролистываемой навигацией, а также перетаскиванием мышью для рабочих столов. При пролистывании между слайдами анимация буквально застревает на кончике пальца или курсора мыши. Быстро нажимая на предыдущую и следующую навигацию, анимация будет ускоряться, чтобы не отставать от вашего темпа. Все анимации имеют аппаратное ускорение для более плавной работы.

Как использовать Компонент Lightbox в UIkit 3

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

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

  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg">Открыть лайтбокс</a>
</div>

Атрибут Alt

Чтобы добавить атрибут alt к изображению в лайтбоксе, установите атрибут data-alt.

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

  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-alt="Image">Открыть лайтбокс</a>
</div>

Описания

Чтобы отобразить заголовок внизу лайтбокса, установите атрибут data-caption с названием заголовка .

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

  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-caption="Описание">Открыть лайтбокс</a>
</div>

Анимации

По умолчанию галерея Lightbox использует анимацию слайдов. Вы можете задать опцию 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.jpg" data-caption="Описание 1">
            <img src="images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Описание 2">
            <img src="images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Описание 3">
            <img src="images/light.jpg" alt="">
        </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.jpg" data-caption="Описание 1">
            <img src="images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Описание 2">
            <img src="images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Описание 3">
            <img src="images/light.jpg" alt="">
        </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.jpg" data-caption="Описание 1">
            <img src="images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Описание 2">
            <img src="images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Описание 3">
            <img src="images/light.jpg" alt="">
        </a>
    </div>
</div>

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

Лайтбокс не ограничен изображениями. Другие медиа, такие как видео, также могут отображаться. Видео будет приостановлено, когда лайтбокс не активен, и возобновится, как только оно снова станет видимым. Чтобы отобразить изображение обложки для видео, установите атрибут 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=YE7VzlLtp-4"></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="images/photo.jpg" data-caption="Image">Изображение</a>
    <a class="uk-button uk-button-default" href="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" data-caption="Video">Video</a>
    <a class="uk-button uk-button-default" href="https://www.youtube.com/watch?v=YE7VzlLtp-4" 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=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" data-caption="Google Maps" data-type="iframe">Google Maps</a>
</div>

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

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

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

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

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

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

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

Лайтбокс

Опция Значение По умолчанию Описание
animation String slide Режим анимации: slide, fade или scale.
autoplay Number 0 Автоматическое воспроизведение. (Задержка в миллисекундах)
autoplay-interval Number 0 Задержка между переключением слайдов в режиме автоматического воспроизведения.
pause-on-hover Boolean false Останавливать воспроизведение при наведении.
video-autoplay Boolean false Автоматическое воспроизведение видео.
index String, Integer 0 Элемент лайтбокса для показа. Индекс на основе 0.
toggle CSS selector a Переключатель - открывает панель лайтбокса при нажатии.

JavaScript

Подробнее о компонентах JavaScript.

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

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

События

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

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

Методы

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

Show

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

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

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

Hide

UIkit.lightboxPanel(element).hide();

Скрывает лайтбокс

startAutoplay

UIkit.lightboxPanel(element).startAutoplay();

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

stopAutoplay

UIkit.lightboxPanel(element).stopAutoplay();

Останавливает автоматическое воспроизведение