Galleries

Gallery is created by using standard image nodes and a card. Specify the extension landing_gallery_cards in the [link=6549767]manifest block[/link] .

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

Mark the container in the layout by the class .js-gallery-cards. Inside the container, add the required number of nodes <img>. Add the attribute data-fancybox="gallery" to each image. This service parameter can have any value, except 'empty'.

Gallery has only one full version of image and not an icon. That's why, use images of sufficient size or scale them via browser (limit the width/height). Gallery script will wrap each image into a link and will open the image, specified in src upon a click.

Optionally, its permitted to use the attribute data-link-classes="d-block g-pos-rel".

Both classes are added to a link-wrapper around the image. These classes are required for layout.

Galleries can be combined with other features. For example, images can be cards, so that the client could add as many, as required. Or it can be a slider, with each image opening in a large size. Examples can be viewed in standard blocks.

Examples

See examples of this type of blocks in the repository, by using the methods landing.block.getmanifestfile и landing.block.getrepository. Their codes:

• 32.11.img_grid_4cols_4
• 32.7.img_grid_4cols_2
• 45.2.gallery_app_with_slider - with slider
• and many more

Example of simple gallery:

<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>