Документация для разработчиков

Галереи

Галерея создаётся с использованием стандартных нод-картинок и карточки. В манифесте блока укажите расширение landing_gallery_cards.

'assets' => array(
   'ext' => array('landing_gallery_cards'),
),

В разметке обозначьте контейнер классом .js-gallery-cards, внутри него добавьте необходимое количество нод <img>. Каждому изображению добавьте атрибут data-fancybox="gallery". Этот служебный параметр может иметь любое значение, кроме пустого.

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

Опционально допускается атрибут data-link-classes="d-block g-pos-rel".

Оба класса добавляются к ссылке-обёртке вокруг изображения, они необходимы для вёрстки.

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

Важно! При совмещении галереи и карусели (слайдера) нужно инициализировать ассеты в определённом порядке: сначала карусель, затем - галерею! Другие ассеты, при их наличии, могут идти в любой последовательности. Смотри код ниже.

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

Пример

Примеры блоков данного типа вы можете посмотреть в нашем репозитории, воспользовавшись методами landing.block.getmanifestfile и landing.block.getrepository. Их коды:

  • 32.11.img_grid_4cols_4
  • 32.7.img_grid_4cols_2
  • 45.2.gallery_app_with_slider - со слайдером
  • и многие другие

Пример простой галереи:

<div class="landing-block g-pt-80 g-pb-80">
   <div class="container">
      <div class="js-gallery-cards row">
         <div class="landing-block-node-card js-animation slideInUp text-center col-lg-3 col-md-4 col-sm-6 g-mb-30">
            <div class="g-pos-rel d-inline-block">
               <img class="landing-block-node-card-img h-100 g-width-auto g-max-width-100x g-max-height-350 g-max-height-500--md"
                   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>

         <div class="landing-block-node-card js-animation slideInUp text-center col-lg-3 col-md-4 col-sm-6 g-mb-30">
            <div class="g-pos-rel d-inline-block">
               <img class="landing-block-node-card-img h-100 g-width-auto g-max-width-100x g-max-height-350 g-max-height-500--md"
                   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>

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

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

      </div>
   </div>
</div>


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2019, «1С-Битрикс», 2019
Наверх