Back to blue

Modal Gallery Component

Modal Gallery

Extension for the modal component. It allows to open a modal with an image gallery inside.

How to use it

Make sure to include the following CSS and JS into your page or project:

  1. ca_styleguide_lazyload.js
  2. ca_styleguide_modal.js
  3. ca_styleguide_modal_gallery.js
  4. ca_sg_modal.css
  5. ca_styleguide_modal_gallery.css

Modal gallery component requires to load the ca_styleguide_modal_gallery.js using lazy load in order to work correctly

<script class="lazy-load" data-src="/static/js/ca_styleguide_modal_gallery.js"></script>

Add the template for the modal gallery on a hidden div, you can use the class js-is-hidden. Also you need to add the class js-modal-gllr-template which is used to select the element.

<div class="js-modal-gllr-template js-is-hidden"> <div class="gllr js-gllr"> <div class="gllr__slides js-gllr-slides"> <div class="gllr__slide js-gllr-slide"> <img src="" alt=""> </div> </div> <div class="gllr__slide-name js-gllr-slide-name">Slide name, it will change according to active slide</div> <div class="gllr__thmbs js-gllr-thmbs"> <div class="gllr__thmb js-gllr-thmb"></div> </div> <span class="gllr__prv js-gllr-prv"> <your SVG left arrow icon>...</your SVG left arrow icon> </span> <span class="gllr__nxt js-gllr-nxt"> <your SVG right arrow icon>...</your SVG right arrow icon> </span> </div> </div>

Add a trigger element with the parameters described in next section:

<div class="gllr-test" data-ca-modal-type="gallery" data-ca-modal-collection='[{"src":"","thumbnail":"","name":""}]' data-ca-modal-active-pic="1" > <img src="" /> </div>

How to configure: Parameters

In addition to the params described in Modals section, you need to configure the modal to display an image gallery with the following params:

  1. *type: string - required the name of the drawer
  2. *collection: string - JSON string containing an array of image objects. Those objects will contain src, thumbnail, and name information
  3. active-pic: string - Index of picture to be shown when gallery is open
  4. * - required

Example 1: No active picture

<div class="gllr-test" data-ca-modal-type="gallery" data-ca-modal-collection='//collection of images goes here//' > <img src="" /> </div>

Click on the thumbnail below to open the modal

Multiple pictures

Single picture

Example 2: Using active picture

<div class="gllr-test" data-ca-modal-type="gallery" data-ca-modal-collection='//collection of images goes here//' data-ca-modal-active-pic="3" > <img src="" /> </div>
Slide Example 1