Галереи

Выберите инструмент для разработки с AI-агентом:

  • используйте Битрикс24 Вайбкод, чтобы создать приложение для Битрикс24 по описанию задачи без знания языков программирования. Агент напишет код и разместит приложение на сервере без ручной настройки хостинга
  • используйте MCP-сервер, чтобы разрабатывать интеграцию через REST API в своем проекте. Агент будет обращаться к официальной REST-документации

Галерея открывает изображения блока в отдельном окне просмотра: посетитель нажимает на картинку и видит ее в полном размере, с переходом к соседним изображениям. Разметка при этом остается обычной — карточки и ноды изображений.

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

Поведение включает расширение landing_gallery_cards: его подключают в манифесте блока.

Как настроить галерею

Минимальный вариант:

'assets' => [
    'ext' => ['landing_gallery_cards'],
],

<div class="js-gallery-cards">
    <img class="landing-block-node-card-img" src="/upload/gallery-1.jpg" data-fancybox="gallery" alt="">
</div>

Что делает расширение landing_gallery_cards

Расширение подготавливает изображения внутри js-gallery-cards к просмотру в режиме галереи и создает кликабельную обертку <a>. В обертку переносится все содержимое родителя изображения, а не только сам тег <img>. Окно просмотра строит библиотека fancybox, которую Битрикс24 подключает вместе с расширением.

При открытии используется изображение из src. Если у ноды есть srcset, оно также передается в настройки просмотра.

Изображения листаются внутри группы, которую задает значение data-fancybox. Расширение дописывает к этому значению идентификатор блока, поэтому одинаковые значения в разных блоках не смешиваются. Если две независимые галереи нужны внутри одного блока, задайте изображениям разные значения атрибута.

Разметка галереи

Корневой контейнер галереи должен иметь класс js-gallery-cards. Больше расширению от контейнера ничего не нужно. У изображения должны быть атрибут data-fancybox и заполненный источник: без адреса изображения ссылка-обертка не создается.

Классы вида landing-block-node-card и landing-block-node-card-img в примерах ниже — это селекторы штатного блока: по ним манифест связывает разметку с карточками и нодами. В штатных блоках галереи каждое изображение описано как карточка, поэтому состав такой галереи меняют карточные методы, а само изображение — нода типа img. В своем блоке это необязательно: если изображения не описаны в ключе cards манифеста, карточные методы к ним неприменимы, а галерея все равно работает.

Атрибуты изображения:

Атрибут

Значение

Что задает

data-fancybox

Имя группы изображений, например gallery

Участие изображения в галерее. Без атрибута изображение в окне просмотра не открывается

src

Адрес изображения

Источник, который откроется при нажатии. Без него ссылка-обертка не создается

data-link-classes

Строка CSS-классов, например d-block g-pos-rel

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

data-lazy-img

Y

Режим отложенной загрузки: источник берется из data-src и data-srcset вместо src и srcset

data-src

Адрес изображения

Источник в режиме отложенной загрузки. Работает только вместе с data-lazy-img="Y"

data-srcset

Набор адресов, как в атрибуте srcset

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

alt

Строка

Подпись, которая выводится под изображением в окне просмотра

Пример:

<div class="js-gallery-cards row">
    <div class="landing-block-node-card col-lg-3 col-md-4 col-sm-6 g-mb-30">
        <img
            class="landing-block-node-card-img g-max-width-100x g-max-height-350"
            src="https://cdn.bitrix24.site/bitrix/images/landing/business/270x481/img1.jpg"
            data-fancybox="gallery"
            data-link-classes="d-block g-pos-rel"
            alt="">
    </div>

    <div class="landing-block-node-card col-lg-3 col-md-4 col-sm-6 g-mb-30">
        <img
            class="landing-block-node-card-img g-max-width-100x g-max-height-350"
            src="https://cdn.bitrix24.site/bitrix/images/landing/business/270x481/img2.jpg"
            data-fancybox="gallery"
            data-link-classes="d-block g-pos-rel"
            alt="">
    </div>
</div>

Совмещение с каруселью

Галерею можно использовать вместе со слайдером. В этом случае важно подключать расширения в порядке:

  1. landing_carousel
  2. landing_gallery_cards
'assets' => [
    'ext' => ['landing_carousel', 'landing_gallery_cards'],
],

Примеры штатных блоков

Коды некоторых штатных блоков:

  • 32.5.img_grid_3cols_1
  • 32.6.img_grid_4cols_1
  • 45.1.gallery_app_wo_slider
  • 45.2.gallery_app_with_slider — галерея вместе со слайдером
  • 45.3.gallery_6cols_2row — также со слайдером

Как изменить изображения через REST

  1. Загрузите файл методом landing.block.uploadfile.
  2. Подставьте полученный src в ноду изображения методом landing.block.updatenodes.
  3. Если нужно добавить или удалить карточку галереи, используйте методы landing.block.addcard, landing.block.clonecard и landing.block.removecard.

Права и ограничения

Scope: landing

Кто может выполнять метод: в зависимости от метода

Ограничения:

  • расширение обрабатывает только контейнеры с классом js-gallery-cards и изображения с атрибутом data-fancybox. Свой класс контейнера задать нельзя
  • в окне просмотра открывается изображение из src. Отдельного адреса для полноразмерной версии нет
  • в режиме редактирования галерея принудительно отключается, поэтому результат проверяют в превью или на опубликованной странице

Продолжите изучение

Предыдущая
Обзор блоков
Следующая
Слайдеры