Lightbox - Webflow помощь
Используйте элемент lightbox для показа изображений или видео в полноэкранном модальном окне.
Как создать lightbox
Lightbox — это кликабельная миниатюра, вложенная в блок ссылки. Когда посетители сайта кликают внутри границ ссылки на живом сайте, открывается lightbox для отображения связанного с ним медиа. Вы можете добавить lightbox из Панель добавления > Дополнительно.
Как работает изображение-заполнитель миниатюры lightbox
Lightbox содержит элемент изображения, который ведет себя как любой другой элемент изображения. Вы можете изменить его размер, дважды щелкнуть, чтобы заменить изображение-заполнитель миниатюры, и добавить альтернативный текст. Узнайте больше об элементах изображения.
Вы можете использовать одно и то же изображение для миниатюры lightbox и большого модального окна lightbox. Webflow автоматически создает адаптивные варианты для всех встроенных изображений. Узнайте больше об адаптивных изображениях.
Как заменить миниатюру lightbox другим содержимым
Вы заменяете элемент изображения-заполнителя и перетаскиваете другое содержимое (например, заголовок или любые другие элементы, не являющиеся ссылками) внутрь ссылки lightbox.
Вы также можете использовать блок div и применить фоновое изображение для создания миниатюр изображений одинакового размера.
Как стилизовать lightbox
Вы можете стилизовать как ссылку на лайтбокс, так и его содержимое. Например, если вы вложите текстовые элементы в ссылку на лайтбокс, вы можете настроить типографику элемента ссылки на лайтбокс.
Как добавить медиа в лайтбокс
Чтобы добавить изображение и подпись в модальное окно лайтбокса:
- Выберите ссылку на лайтбокс на холсте
- Перейдите в Панель настроек элемента > Настройки ссылки на лайтбокс > Медиа
- Нажмите на значок “Добавить элемент списка”
- Выберите "Изображение" в качестве Типа
- Нажмите Заменить изображение
- Выберите изображение из Панели активов
- Добавьте Подпись при необходимости
Вы можете добавить столько изображений в ссылку на лайтбокс, сколько хотите. Эти изображения будут отображаться как слайд-шоу внутри модального окна лайтбокса.
Чтобы добавить видео в модальное окно лайтбокса:
- Выберите ссылку на лайтбокс на холсте
- Перейдите в Панель настроек элемента > Настройки ссылки на лайтбокс > Медиа
- Нажмите на значок “Добавить элемент списка”
- Выберите "Видео" в качестве Типа
- Добавьте URL видео в поле URL
- Добавьте Заголовок при необходимости
Лайтбокс для изображений и видео - Урок по веб-дизайну
Как создать динамические лайтбоксы из медиа полей коллекции
Вы можете создавать динамические лайтбоксы, извлекая миниатюру изображения и/или медиа лайтбокса из медиа полей коллекции (например, поле изображения, поле с несколькими изображениями или поле видео) в ваших CMS или Ecommerce коллекциях.
Чтобы подключить динамическое поле коллекции к миниатюре лайтбокса:
- Добавьте лайтбокс в динамически подключенный список коллекции или на страницу коллекции CMS
- Выберите изображение-заполнитель миниатюры
- Перейдите в Настройки элемента > Настройки изображения
- Нажмите на значок "фиолетовая точка" в поле Изображение
- Выберите поле изображения коллекции
Затем вы можете подключить лайтбокс к полю Коллекции, чтобы ваши динамические изображения Коллекции были доступны в лайтбоксе. Чтобы подключить динамическое поле Коллекции к медиа лайтбокса:
- Выберите ссылку лайтбокса
- Перейдите в Настройки элемента > Настройки ссылки лайтбокса
- Нажмите на значок "фиолетовая точка" в поле Медиа
- Выберите поле медиа Коллекции
Чтобы подключить лайтбокс к полю с несколькими изображениями:
- Добавьте список Коллекции на страницу Коллекции
- Подключите список Коллекции к полю с несколькими изображениями, нажав на выпадающее меню Источник и выбрав поле с несколькими изображениями
- Добавьте лайтбокс в список Коллекции
- Выберите элемент изображение в лайтбоксе
- Перейдите в Настройки элемента > Настройки изображения
- Нажмите на значок "фиолетовая точка" в поле Изображение
- Выберите поле с несколькими изображениями
- Выберите ссылку лайтбокса на холсте
- Перейдите в Настройки элемента > Настройки ссылки лайтбокса
- Нажмите на значок "фиолетовая точка" в поле Медиа
- Выберите поле с несколькими изображениями
Вы также можете подключить лайтбокс к полю с несколькими изображениями, когда лайтбокс добавлен в списки Коллекции или страницы Коллекции.
Как связать лайтбоксы, используя группы лайтбоксов
Вы можете связать несколько лайтбоксов вместе, чтобы создать галерею слайд-шоу. Когда посетитель сайта нажимает на связанный лайтбокс, лайтбокс откроет все медиа, связанные с этой группой.
Как создать группу лайтбоксов
- Выберите любой элемент в лайтбоксе
- Перейдите в Настройки элемента > Настройки лайтбокса
- Введите имя группы в поле Совпадение или создание имени группы
Лайтбоксы с одинаковым именем группы связаны в группу.
Для лайтбоксов в списках Коллекции создание и связывание одного лайтбокса в элементе Коллекции автоматически связывает все лайтбоксы в списке Коллекции.
Создание нескольких групп лайтбоксов на странице
Если на странице несколько лайтбоксов, вы можете разделить их, назначив каждой группе лайтбоксов разное Имя группы.