Модуль Лайтбокс открывает изображения поверх страницы во всплывающем окне. Посетитель может посмотреть картинку крупнее, не переходя на отдельную страницу.
⚠️ Важно, чтобы изображения открывались во всплывающем окне, у изображения должна быть ссылка на картинку. Без ссылки лайтбокс не открывается. Исключение: галереи WordPress.
Как работает модуль
Модуль ищет изображения только внутри области, указанной в настройке Селектор контента. По умолчанию используется селектор .wpbox-content.
Это значит, что лайтбокс проверяет изображения в основном контенте страницы, а не по всему сайту.
Во всплывающем окне могут открываться:
- обычные изображения, обернутые в ссылку на файл изображения;
- изображения из галереи Gutenberg;
- изображения из классической галереи WordPress.
Какие изображения открываются в лайтбоксе
Обычные изображения
Обычное изображение откроется в лайтбоксе, если выполняются три условия:
- изображение находится внутри области из настройки Селектор контента;
- изображение обернуто в ссылку;
- ссылка ведет на файл изображения.
<a href="image.jpg">
<img src="image-300x200.jpg" alt="">
</a>Если ссылка ведет не на файл изображения, а, например, на обычную страницу, такое изображение в лайтбоксе не откроется.
Галерея Gutenberg
Галерея Gutenberg поддерживается отдельно. Лайтбокс может работать с такими галереями даже тогда, когда у изображений нет собственных ссылок.
В этом случае модуль находит изображения внутри конкретной галереи и открывает их во всплывающем окне.
Если для галереи доступна лента превью, она показывается только для изображений текущей галереи.
Классическая галерея WordPress
Классическая галерея WordPress может выводить ссылки не на сам файл изображения, а на страницу вложения.
Для таких случаев в модуле есть отдельная обработка. Лайтбокс распознает классическую галерею, берет миниатюру и пытается восстановить путь к исходному изображению.
Листание изображений
Если включена настройка Включить навигацию, посетитель может переключаться между изображениями внутри лайтбокса.
Листание работает через:
- клик по стрелкам;
- клавиши со стрелками на клавиатуре;
- свайпы на мобильных устройствах.
Зацикливания нет. После последнего изображения перехода к первому не происходит.
Превью галереи
Если открыто изображение из галереи, внизу всплывающего окна может показываться лента превью.
- превью показываются только для изображений текущей галереи;
- для одиночного изображения лента превью не выводится;
- по клику на превью можно перейти к нужному изображению.
Заголовок и подпись изображения
Заголовок изображения
Если включена настройка Показывать заголовок, модуль выводит заголовок изображения во всплывающем окне.
Заголовок берется из атрибута title у изображения или ссылки, в которую оно обернуто.
Подпись изображения
Если включена настройка Показывать подпись, модуль ищет подпись в ближайшем элементе figcaption.
Положение подписи зависит от настройки Положение подписи:
- Поверх — поверх изображения;
- Сверху — над изображением;
- Снизу — под изображением.
Если подпись не найдена, она не показывается.
Если включены заголовок и подпись
Настройки Показывать заголовок и Показывать подпись работают независимо друг от друга.
Можно включить только заголовок, только подпись или оба элемента сразу.
Если для заголовка и подписи выбрана одна позиция Сверху или Снизу, они выводятся одним общим блоком. Заголовок всегда располагается выше подписи.
Для позиции Поверх используется отдельная логика: заголовок выводится в верхней части изображения, а подпись — в нижней.
Учет верхней панели WordPress
Если пользователь авторизован в WordPress и сверху сайта показана административная панель, лайтбокс учитывает ее высоту автоматически.
Это нужно, чтобы всплывающее окно не пряталось под верхнюю панель, а кнопка закрытия оставалась доступной.
Настройки в кастомайзере
Все настройки находятся в кастомайзере Внешний вид > Настроить в разделе Модули > Лайтбокс.
Включение модуля
Включает или отключает модуль. Если настройка выключена, лайтбокс на сайте не работает.
Селектор контента
Задает CSS-селектор области, внутри которой модуль ищет изображения.
По умолчанию используется: .wpbox-content
Если в теме или на конкретном сайте изображения выводятся в другой обертке, селектор можно изменить.
Показывать заголовок
Включает показ заголовка изображения во всплывающем окне.
Положение заголовка
Определяет, где показывать заголовок:
- Поверх — поверх изображения;
- Сверху — над изображением;
- Снизу — под изображением.
Настройка доступна только если включен параметр Показывать заголовок.
Показывать подпись
Включает показ подписи изображения. Подпись берется из элемента figcaption.
Положение подписи
Определяет, где показывать подпись:
- Поверх — поверх изображения;
- Сверху — над изображением;
- Снизу — под изображением.
Настройка доступна только если включен параметр Показывать подпись.
Поддержка галерей
Включает поддержку галереи Gutenberg и классической галереи WordPress.
Если настройка включена, изображения из галерей могут открываться в лайтбоксе даже без прямой ссылки на файл.
Навигация
Настройка Включить навигацию включает переключение между изображениями.
Если настройка отключена, стрелки листания не показываются, а переключение с клавиатуры и свайпами не работает.
Иконка навигации
Задает иконку для кнопок переключения изображений.
Одна и та же иконка используется для обеих сторон. Для левой кнопки она автоматически отражается по горизонтали.
Иконка закрытия
Задает иконку кнопки закрытия лайтбокса.
Дизайн
Цвет фона
— цвет фона всего всплывающего окна поверх страницы.
Цвет текста
— цвет текста и иконок внутри лайтбокса. Настройка влияет на стрелки, кнопку закрытия, заголовок и подпись изображения.
Image Shadow
— тень вокруг блока с изображением.
Отступы
Горизонтальный внутренний отступ
задает отступы слева и справа внутри лайтбокса.
Вертикальный внутренний отступ
задает отступы сверху и снизу внутри лайтбокса.
Для этих настроек можно задать отдельные значения для устройств ПК, Планшет и Мобильный.
CSS-переменные
Подробнее о работе с CSS-переменными и о том, где их можно переопределить, читайте в этой статье.
Обычно достаточно настроек кастомайзера, но при необходимости вы всегда можете изменить нужные CSS-переменные вручную.
--wpbox-lightbox-bg: rgba(0, 0, 0, .92); /* Цвет фона лайтбокса */
--wpbox-lightbox-text-color: #fff; /* Цвет текста и иконок */
--wpbox-lightbox-adminbar-offset: 0px; /* Отступ под верхнюю панель WordPress */
--wpbox-lightbox-viewport-height: calc(100vh - var(--wpbox-lightbox-adminbar-offset, 0px)); /* Доступная высота лайтбокса */
--wpbox-lightbox-padding-x: 1rem; /* Горизонтальный внутренний отступ */
--wpbox-lightbox-padding-y: 1rem; /* Вертикальный внутренний отступ */
--wpbox-lightbox-image-box-shadow: ; /* Тень изображения */
--wpbox-lightbox-image-border-radius: ; /* Скругление изображения */
--wpbox-lightbox-thumbnails-height: 5rem; /* Высота миниатюр */
--wpbox-lightbox-thumbnails-gap: .5rem; /* Расстояние между миниатюрами */
--wpbox-lightbox-thumbnail-border-radius: ; /* Скругление миниатюр */
--wpbox-lightbox-top-meta-offset: 0px; /* Высота верхнего блока заголовка и подписи */
--wpbox-lightbox-bottom-meta-offset: 0px; /* Высота нижнего блока заголовка и подписи */
--wpbox-lightbox-thumbnails-offset: 0px; /* Место под ленту превью */
--wpbox-lightbox-overlay-top-offset: 0px; /* Высота верхнего overlay-блока */
--wpbox-lightbox-overlay-bottom-offset: 0px; /* Высота нижнего overlay-блока */