Компонент Лайтбокс : 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> </div>
Атрибут 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>
Примеры лайтбокс с использованием различных анимаций
-
SlideFadeScale
-
<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" alt=""> </a> </div> <div> <a class="uk-inline" href="/demo/img/dark.jpg" data-caption="Всё прекрасно!"> <img src="/demo/img/dark.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="/demo/img/light.jpg" data-caption="Да всё супер!"> <img src="/demo/img/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="/demo/img/photo.jpg" data-caption="Да всё супер!"> <img src="/demo/img/photo.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="/demo/img/dark.jpg" data-caption="Отличного настроения!"> <img src="/demo/img/dark.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="/demo/img/light.jpg" data-caption="Всё прекрасно!"> <img src="/demo/img/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="/demo/img/photo.jpg" data-caption="Вот это счастье"> <img src="/demo/img/photo.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="/demo/img/dark.jpg" data-caption="Надпись под изображением"> <img src="/demo/img/dark.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="/demo/img/light.jpg" data-caption="А вот и хорошо!"> <img src="/demo/img/light.jpg" alt=""> </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-nocookie.com
, и лайтбокс будет использовать домен для встраивания видео YouTube.
Указать тип контента
Лайтбокс использует атрибут 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 |
Number | 0 |
Автозапуск Lightbox. (Задержка в миллисекундах) |
autoplay-interval |
Number | 0 |
Задержка между переключением слайдов в режиме автовоспроизведения. |
pause-on-hover |
Boolean | false | Приостановить режим автозапуска при наведении. |
video-autoplay |
Boolean | false | Lightbox автовоспроизведение видео. |
index |
String, Integer | Отображаемый элемент лайтбокса. Индекс начинается с 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, Integer | Элемент лайтбокса для отображения. Индекс начинается с 0. |
Hide
UIkit.lightboxPanel(element).hide();
Скрывает панель лайтбокса.
startAutoplay
UIkit.lightboxPanel(element).startAutoplay();
Запускает автозапуск лайтбокса.
stopAutoplay
UIkit.lightboxPanel(element).stopAutoplay();
Останавливает автозапуск лайтбокса.