LightBox с точки зрения UX/UI и как он меняет продукты / Хабр

В Экосистеме РСХБ мы создаем инновационные продукты для сельского хозяйства.
Для их разработки мы решили использовать подход мировых компаний в области UX/UI.
Чтобы не повторять ошибки конкурентов и создать полноценную экосистему.
Основой всех продуктов экосистемы стал LightBox, который является сквозным функциональным дизайн-решением. Например, в проекте для фермеров, мы решаем насущные проблемы и вопросы фермера в одном окне и кроме маркетплейса товаров предоставляем большое число услуг
и сервисов.
Сложность проекта заключается в объединении в одном портале разных сценариев и ролей.

Что такое LightBox и почему именно «LightBox», а не «LightWindow», в чем его отличие от Pop-up, как он способен изменить продукт. Все это я постараюсь рассказать ниже.

1 — С точки зрения разработки LightBox представляет собой всплывающее окно с изображением.

2 — Pop-up или модальное окно, представляет собой всплывающее окно с минимальным набором функционала не имеющего отдельного URL. Его основная задача информировать пользователя, спрашивать и уточнять, предупреждать, открывать просмотр и медиа контента.

3 — Модальные окна занимают, как правило, менее 30% экрана. LightBox — это уже полноценная страница, с полноценным функционалом и имеющая отдельный URL и площадью покрытия от 70% до 90%.

4 — Почему мы считаем данное решение ключевым и важным для UХ и UI большинства продуктов?
Все просто. Все интерфейсы и дизайн решения имеют несколько целей и единый путь развития. Все меняется и имеет цикличность, так вот — если углубиться в историю первых интерфейсных решений, то все они были основаны на LightWindows, это были функциональные всплывающие окна. Сейчас же весь дизайн стремится к максимальному удобству, оптимизации времени и минимализму одного окна.
Идеальный продуктовый интерфейс — это одно окно.

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

Почему мы стали применять LightBox, расскажу на одном примере ниже.
Пользователь находится на портале, ищет необходимый товар или услугу, через поиск, получает страницу выдачи, добавляет фильтры и дополнительные критерии. Находит нужный товар, нажимает на карточку, совершает покупку, закрывает через браузер или «хлебные крошки», переходит на страницу списка, теряя контекст, фильтры и поиск который он делал ранее.

Это порядка 7-10минут, а в сложных продуктах и более 25минут.
Человек теряет время, теряет контекст и начинает свой путь заново.

LightBox, помогает решить проблему потери контекста, фильтров, поиска и выдачи. Это страница с уникальным URL (всегда можно отследить переход на нее и поделиться ссылкой), открывается поверх страницы выдачи и позволяет вернуться в тот же экран откуда пользователь ушел.

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

Преимущества LightBox:
— Уникальный URL
— Полноценная страница с сохранением функционала
— Сохранение контекста
— Интуитивность
— Свобода реализации и дизайна
— 70%-90% рабочего пространства с возможностью отображать интерфейс в полном объеме
— Возможность блочного построения и интеграции внедренного скролла.

Экосистема для фермеров (Своё | Фермерство)

Как в реальных проектах работает LightBox и каковы его преимущества.
Во первых, время работы и переходов сокращается в среднем с 10 минут до 1 минуты.
Во вторых, общее время и скорость взаимодействия до конечного действия, сокращается вдвое.

Фермеры и пользователи положительно оценили это решение и мы стремимся к работе в одном окне.

Меня зовут Кирилл Тагинцев, я возглавляю UI/UX экосистемы РСХБ, мы разрабатываем проекты и применяем LightBox в своих проектах. В статье представлены лишь часть из них.
В одном из последних продуктов, для которого применялось данное решение, по рейтинг markswebb, заняло 1-е место, и LightBox был решающим с точки зрения удобства пользовательского взаимодействия.

Новостной портал, с социальными блогами для фермеров (Новости и Блоги)

Портал поиска сотрудников и работы в агро направлении (Подбор персонала)

Какие компании используют LightBox:
— Яндекс
— Facebook
— Mail.group
— dribbble.com
— Bechance.net
— Сбербанк

jQuery Lightbox

Опубликовано: 1 января 1970 г.

• графика

• jquery

• Скачать

Lightbox — это JQuery-плагин, который используется для отображения изображения или любого другого контента в специально оформленном окне, которое показывается, как правило, на полупрозрачном затененном фоне поверх основного контента страницы.

Прежде чем устанавливать плагин на страницу и заниматься его настройкой, давайте взглянем на примеры:

Начало работы с Lightbox

Скачайте последнюю версию плагина (также доступна через Bower: bower install lightbox2 --save). После этого разархивируйте zip файл и загляните в урезанный рабочий пример, который находится в папке examples.

Готовые для установки Lightbox на вашей странице? Начните с подключения CSS и Javascript. Вы можете взять оба этих файла из папки dist. Вставьте следующий код между тегами head в вашей web-странице

<link href="path/to/lightbox.css" rel="stylesheet">

Следующий код, подключающий плагин, вставьте перед закрывающим тегом body:

<script src="path/to/lightbox.js"></script>

Убедитесь, что JQuery, который требуется Lightbox, также загружаются. Если вы уже используете JQuery (требуется JQuery 1.

7 или выше) на странице, убедитесь, что он загружается до lightbox.js. Если у вас не подключена jQuery, воспользуйтель dist/js/lightbox-plus-jquery.js, в котором уже есть эта библиотека, либо скачайте последнюю версию с оф. сайта. Убедитесь, что четыре изображения, прописанные в lightbox.css расположени в указанном месте. Вы можете взять изображения из папки /dist/images.

Теперь займемся HTML-кодом. Добавьте атрибут data-lightbox к ссылке, содержащей изображения и к которым мы хотим применить наш плагин. В качествен значения атрибута используйте уникальное для каждого изображения имя. Например:

<a href="images/image-1.jpg" 
   data-lightbox="image-1" 
   data-title="Мой заголовок">Image #1</a>

Добавьте атрибут data-title, если вы хотите показать заголовок. Если у вас есть группа связанных изображений, которые вы хотели бы объединить в набор, используйте одинаковое значение в атрибуте

data-lightbox для требуемых изображений. Например:

<a href="img2.jpg" data-lightbox="roadtr">Img 2</a>

<a href="img3.jpg" data-lightbox="roadtr">Img 3</a>

<a href="img4.jpg" data-lightbox="roadtr">Img 4</a>

Настройки Lightbox

Если вы хотите изменить какие-либо параметры по умолчанию, вызовите метод option:.

<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

• alwaysShowNavOnTouchDevices

  По умолчанию:

  false

  Если true, то левая и правая стрелки навигации, которые появляются при наведении мыши при просмотре набора изображений, будут всегода видимы на устройствах с поддержкой сенсорного ввода

• fadeDuration

  По умолчанию:

  500

  Время, необходимое для исчезновения контейнера, в миллисекундах.

• fitImagesInViewport

  По умолчанию:

  true

  Если true, то пропорционально уменьшаем размер изображения чтобы картинка поместилось в области просмотра. Это избавляет пользователя от необходимости скроллить, чтобы увидеть все изображение.

• maxWidth

  Если задано, высота изображения будет ограничена этим значением (в пикселях). Соотношение сторон не будет соблюдаться.

• maxHeight

  Если задано, ширина изображения будет ограничена этим значением (в пикселях). Соотношение сторон не будет соблюдаться.

• positionFromTop

  По умолчанию:

  50

  Расстояние от верхней части окна просмотра до Lightbox-контейнера (в пикселях).

• resizeDuration

  По умолчанию:

  700

  Время, в течение которого Lightbox-контейнер будет изменять свою ширину и высоту при смене изображений разного размера (в миллисекундах).

• showImageNumberLabel

  По умолчанию:

  true

  Если false, в текст будет указываться текущий номер изображения и общее количество изображений в наборе, например: «Изображение 2 из 4».

• wrapAround

  По умолчанию:

  false

  Если true, то при показе последнего изображения кнопка для показа следующего изображения не исчезает. Нажатие на нее приведет к показу первого изображения.

6 примеров всплывающих окон с лайтбоксом (и как создать свой собственный)

Чему бренды электронной коммерции могут научиться благодаря целенаправленному выбору дизайна казино Лас-Вегаса? Получается много.

Если вы когда-либо были в казино Вегаса, то знаете, что они состоят из гигантского лабиринта с минимумом вывесок, несколькими окнами или без них и без часов в поле зрения. Этот выбор дизайна является преднамеренным, поскольку он сосредоточен на устранении любых отвлекающих факторов и на том, чтобы игроки в казино тратили больше денег.

Использование всплывающего окна лайтбокса на вашем веб-сайте электронной коммерции делает то же самое, но в меньшем масштабе. Они:

1. Минимизируйте и затените все отвлекающие факторы
2. Привлеките внимание ваших покупателей к тому, что вы хотите, чтобы они сделали

практики, а также шесть качественных примеров всплывающих окон с лайтбоксами, которые вы можете использовать для вдохновения. Затем мы добавим несколько настраиваемых шаблонов, которые вы можете использовать, чтобы быстро приступить к работе.

Что такое всплывающее окно лайтбокса?

Всплывающее окно лайтбокса — это всплывающее окно или виджет, который перекрывает часть экрана (обычно середину), оставляя все остальное не в фокусе и/или неактивным. Это способ перенаправить внимание людей на конкретный призыв к действию, например на скидку, дополнительные/перекрестные продажи, запуск продукта, вебинар и т. д. как гангстеры, может показаться, что вы сорвали джек-пот.

Может возникнуть соблазн постоянно использовать их везде и всегда. Но, как правило, это плохая идея, поскольку плохо выполненное всплывающее окно является одним из самых больших оборотов UX сайта для посетителей.

Вот несколько передовых методов, которым вы можете следовать, чтобы убедиться, что ваши всплывающие окна конвертируются, не отталкивая всех ваших потенциальных клиентов:

• Создайте привлекательное предложение . Ваше всплывающее окно с лайтбоксом обречено с самого начала, если ваше предложение не актуально и не соответствует вашей целевой аудитории.
• Сделайте свой призыв к действию действенным и конкретным . Это относится ко всему в маркетинге, а не только к всплывающим окнам. Чем проще вы сделаете для кого-то желаемое действие, тем больше вероятность, что он это сделает.
• Настроить правильные триггеры . Дело не только в правильном предложении. Это также о показе его в нужное время. Таким образом, вы должны думать о том, чтобы отображать его не только на нужных страницах, но и учитывать правильное время и глубину прокрутки.
• Использовать дизайн всплывающего окна лучшие практики . Всплывающее окно с лайтбоксом должно выделяться и привлекать внимание посетителей.
• Убедитесь, что ваше всплывающее окно хорошо работает на смартфонах . На дворе 2022 год, и большинство людей начинают поиск со смартфона. Возможно, вы захотите либо отключить всплывающее окно лайтбокса на мобильных устройствах, либо сделать так, чтобы его было легко щелкнуть или удалить.
• Встречайте своих посетителей там, где они есть . Подумайте о контексте предложения. Например, если кто-то читает пост в блоге, который находится на вершине воронки, может быть более эффективным отобразить всплывающее окно лайтбокса в конце статьи с призывом к действию для загрузки электронной книги по этой теме, а не пытаться продать ее на ваш продукт или услугу прямо сейчас. ‍
• Не переусердствуйте . Попапы работают, но не должны работать за счет UX сайта, особенно на смартфонах. Это может повредить репутации вашего бренда и заставить вас выглядеть отчаянно.

Часто проще создавать собственные всплывающие окна с лайтбоксами, если вы можете видеть и вдохновляться другими.

Вот шесть отличных примеров, на которых можно поучиться. Читайте дальше для разбивки каждого.

1. Всплывающее окно лайтбокса Tipsy Elves

Tipsy Elves — компания по производству одежды, ориентированная в первую очередь на покупателей поколения Z и миллениалов. В своих кампаниях Google Ad они используют игровое всплывающее окно со скидкой на своей целевой странице для привлечения новых клиентов:

См. полный пример

Все в этой концепции всплывающего окна реализовано хорошо. Во-первых, он вдохновлен игровыми шоу, такими как «Колесо фортуны» и «Цена права», которые почти каждый американский миллениал и дети старшего поколения Z смотрели, когда болели после школы.

Не говоря уже о том, что конкретная сумма скидки, которую вы можете выиграть, также значительна.

Многие интернет-магазины делают скидки слишком низкими. Все будут нажимать «X», если вы предлагаете скидку 5%, когда средняя стоимость заказа составляет 50 долларов или меньше. Это скидка 2,50 доллара.

Однако, если вы предлагаете скидку до 20%, как то, что делают Tipsy Elves, скидка 20% на предмет стоимостью 50 долларов означает скидку 10 долларов — гораздо более заманчиво!

2. Всплывающее окно с предложением скидки AutoAnything

Не всем компаниям нужно геймифицировать свои скидки. AutoAnything — хороший тому пример. Они используют всплывающее окно с лайтбоксом, чтобы привлечь внимание к своим «самым горячим предложениям».

См. полный пример

Компания дополнительно стимулирует людей подписаться на рассылку, предлагая 15% скидку на первый заказ. (Опять же, это значимая сумма скидки!)

Также есть большая синяя кнопка призыва к действию с текстом «Получить мои сбережения», которая выделяется и ориентирована на выгоду — гораздо более заманчиво, чем простая кнопка «Подписаться».

Они делают это предложение еще более привлекательным, предлагая гарантию в форме: «После покупки вы найдете товар по более низкой цене. Мы вернем разницу».

Вы также можете сказать, что эта компания знает свои цифры, потому что они включают в себя минимум заказа. Включая скидку 15% для заказов на сумму более 99 долларов, это гарантирует, что математика подтвердится.

ПОСМОТРЕТЬ БОЛЬШЕ: Как создавать привлекательные (и выгодные) предложения, перед которыми не смогут устоять посетители вашего веб-сайта просто еще одно всплывающее окно со скидкой 15%.

Однако мы просматривали этот сайт за неделю до Дня матери в США. И это конкретное всплывающее окно отображается только на целевых страницах кампании, посвященной Дню матери:

См. полный пример

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

Но он по-прежнему хорошо работает, учитывая контекст, где и когда он отображается на веб-сайте.

4. Пример всплывающего окна бесплатной доставки Yeti

Скидки — самые популярные всплывающие окна. Однако, если ими злоупотреблять (или использовать неправильно), они также могут удешевить ваш бренд и подсознательно приучить ваших клиентов покупать только тогда, когда они увидят скидку.

Всплывающее окно с бесплатной доставкой, похожее на то, что использует Yeti, может быть эффективной альтернативой:

См. полный пример

Во-первых, всплывающее окно с бесплатной доставкой Yeti соответствует бренду и хорошо спроектировано. Это бренд для активного отдыха, и он отражается во всем, от фона всплывающего окна до используемой копии.

CTA также прост. Они не пытаются обмануть вас или использовать пассивно-агрессивный текст, чтобы заставить вас что-то сделать.

Вместо этого они просто спрашивают, хотите ли вы бесплатную доставку, а затем вам просто нужно нажать «да» или «нет».

Следующий шаг собирает почтовый индекс, чтобы убедиться, что бесплатная доставка доступна, а также адрес электронной почты для привлечения потенциальных клиентов:

5.

Всплывающее окно с лайтбоксом для запуска продукта Tradlands

Tradlands, бутик женской моды, использует это всплывающее окно с лайтбоксом привлечь внимание к своей новой продуктовой линейке:

См. полный пример

Это простое, но эффективное всплывающее окно для запуска продукта. Никаких скидок, бесплатной доставки или других денежных поощрений не требуется.

Текст и дизайн минималистичны, но эффективны. Заголовок гласит: «Запуск мини-капсулы».

Они также включают фотографию модели в одном из новых образов бренда.

Затем кнопка призыва к действию — «Добавить в капсулу», что указывает на запуск продукта.

СОВЕТ ПРОФЕССИОНАЛА:

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

Узнайте больше о таргетинге в ConvertFlow

6.

Пример всплывающего окна лайтбокса бесплатной пробной версии Sprout Social

Этот пример всплывающего окна лайтбокса от SproutSocial интересен по целому ряду причин. Во-первых, это от компании SaaS, а не от электронной коммерции.

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

См. полный пример

Он также занимает больше места на экране и содержит больше текста, чем многие другие примеры, которыми мы поделились.

Они предлагают начать бесплатную пробную версию. Они используют более длинный подзаголовок/описание, чтобы передать преимущества опробования их программного обеспечения. Затем у них есть большая зеленая кнопка призыва к действию с текстом «Начать бесплатную пробную версию», чтобы еще больше побудить людей к действию.

Это отличный пример того, почему вы должны использовать принципы передового опыта в качестве ориентира, а также проверять свои собственные идеи, чтобы увидеть, что работает на вашем сайте и с вашей аудиторией 💪

Готовы создать свое собственное всплывающее окно с лайтбоксом? ConvertFlow упрощает этот процесс.

На самом деле, вы можете выбрать один из сотен готовых шаблонов всплывающих окон или создать свой собственный дизайн с нуля. Вы также можете выбрать один из нескольких вариантов триггера (намерение выхода, задержка по времени, точка прокрутки и т. д.) и настроить условия таргетинга, чтобы контролировать, когда и где он будет отображаться.

Вот несколько шаблонов, которые вы можете начать использовать прямо сейчас:

Об авторе

Джессика Малник

Автор, ConvertFlow

Джессика — копирайтер и контент-стратег с более чем 10-летним опытом работы в области SaaS-маркетинга. Ее работы появлялись на ведущих отраслевых веб-сайтах, таких как Social Media Examiner, SEMRush, CMX, The Next Web, Databox, Help Scout, Convince & Convert и других. Когда она не пишет что-то эпическое, вы обычно можете увидеть, как она смотрит «Мастер Шеф» или обучает людей на 9-м канале.0s поп-культура мелочи.

Лайтбокс | Webflow University

Домашний урок

Лайтбокс

Домашний урок

Все уроки

Используйте элемент лайтбокса для отображения изображений или видео в полноэкранном модальном окне.

элемента

 

У этого видео старый пользовательский интерфейс. Скоро будет обновленная версия!

Элемент лайтбокс показывает изображения (с надписями или без) или видео в полноэкранном модальном окне слайд-шоу. Лайтбоксы также реагируют на точки останова, что делает их полезными для отображения мультимедиа на экранах настольных компьютеров, планшетов и мобильных устройств.

В этом уроке вы узнаете:

1. Как создать лайтбокс
2. Как добавить медиа лайтбокс
3. Как связать лайтбоксы с помощью групп

Как создать лайтбокс

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

Чтобы добавить лайтбокс:

1. Перейти к Добавить панель > Дополнительно
2. Щелкните элемент лайтбокса или перетащите его на холст Webflow

Как работает эскиз заполнителя лайтбокса

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

Вы можете использовать одно и то же изображение для миниатюры лайтбокса и большого модального окна лайтбокса. Webflow автоматически создает адаптивные варианты для всех встроенных изображений. Узнайте больше об адаптивных изображениях.

Как заменить миниатюру лайтбокса другим содержимым

Вы заменяете элемент изображения-заполнитель и перетаскиваете другое содержимое (например, заголовок или любые другие элементы, не являющиеся ссылками) внутри ссылки лайтбокса .

Вы также можете использовать блок div и применить фоновое изображение для создания миниатюр изображений одинакового размера.

Как оформить лайтбокс

Вы можете стилизовать как ссылку лайтбокса, так и его содержимое. Например, если вы вкладываете текстовые элементы в ссылку лайтбокса, вы можете стилизовать типографику элемента ссылки лайтбокса.

Вы не можете настроить наложение фона в модальном окне, которое открывается при нажатии на ссылку лайтбокса. Однако вы можете добавить изображение или видео и добавить подпись к изображению, если хотите.

Как добавить медиафайл лайтбокса

Чтобы добавить изображение и подпись к модальному окну лайтбокса:

1. Выберите ссылку лайтбокса на холсте
2. Перейти к Панель настроек элемента > Настройки лайтбокса
3. Нажмите « Добавить изображение » значок
4. Нажмите Выберите изображение
5. Выберите изображение из панели активов
6. Добавить подпись в разделе . Вы можете добавить в лайтбокс столько изображений, сколько захотите. Эти изображения будут отображаться в виде слайд-шоу внутри модального окна лайтбокса.
   Примечание: В настоящее время элементы лайтбокса не поддерживают замещающий текст для изображений внутри лайтбокса.

   Чтобы добавить видео в модальное окно лайтбокса:

   1. Выберите ссылку на лайтбокс на холсте
   2. Перейдите на Панель настроек элемента Значок ”
   3. Добавьте URL-адрес видео в поле URL
   4. Щелкните Сохранить

   Как создать динамические лайтбоксы из мультимедийного поля коллекции

   из полей медиаколлекции (например, поля изображения, поля с несколькими изображениями или поля видео) в вашей CMS или коллекциях электронной торговли.

   Чтобы подключить поле динамической коллекции к миниатюре лайтбокса:

   1. Добавить лайтбокс к динамически подключаемому списку коллекций или странице коллекций CMS
   2. Выберите миниатюру изображения-заполнителя Настройки изображения
   3. Установите флажок «Получить изображение из сообщений блога » (название коллекции может отличаться в зависимости от выбранной вами коллекции)
   4. Выберите поле «Коллекция изображений» из Выберите поле раскрывающийся список

   Затем вы можете подключить лайтбокс к полю Коллекция, чтобы в лайтбоксе были доступны изображения вашей динамической коллекции. Чтобы подключить динамическое поле «Коллекция» к медиафайлу лайтбокса:

   1. Выберите ссылку лайтбокса
   2. Перейдите к Настройки элемента > Настройки лайтбокса > Медиа
   3. Установите флажок «00 Получить медиа из сообщений» ” (название коллекции может отличаться в зависимости от выбранной вами коллекции)
   4. Выберите поле Коллекции мультимедиа из раскрывающегося списка Выберите поле

   Чтобы подключить лайтбокс к полю с несколькими изображениями: -image, щелкнув раскрывающийся список Source и выбрав поле с несколькими изображениями

7. Добавьте лайтбокс в список коллекции
8. Выберите элемент image в лайтбоксе
9. Перейти к Настройки элемента > Настройки изображения
10. Установите флажок «Получить изображение из сообщений блога » (название коллекции может отличаться в зависимости от выбранной вами коллекции)
11. Выберите мульти- поле изображения из раскрывающегося списка Выберите поле
12. Выберите лайтбокс ссылку на холсте
13. Перейти к Настройки элемента > Настройки лайтбокса
14. Установите флажок «Получить медиафайлы из сообщений блога » (название коллекции может отличаться в зависимости от выбранной вами коллекции)
15. Выберите поле с несколькими изображениями из раскрывающегося списка

Выберите поле с несколькими изображениями

Подробнее о поле с несколькими изображениями.

Как связать лайтбоксы с помощью групп лайтбоксов

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

Как создать группу Lightbox

1. Выберите любой элемент в Lightbox
2. Перейти к настройкам элементов > Настройки Lightbox
3. Проверка «Ссылка с другими лампами»
4. Введите Group Name

1221212

Как связать другие лайтбоксы с той же группой

Чтобы связать другие лайтбоксы с группой, выполните следующие шаги для каждого лайтбокса:

1. Выберите любой элемент в лайтбоксе
2. Перейти к Настройки элемента > Настройки лайтбокса
3. Установите флажок «Связать с другими лайтбоксами»
4. Введите то же самое Имя группы

автоматически связывает все лайтбоксы в списке коллекции.