Insites Docs Web Components V2GeneralGallery

Gallery

Published on February 12, 2021, updated on June 16, 2021

Element: <ins-gallery>

Creates a responsive gallery that lazy loads images from thumbnails.

Complete Example

Code Snippet

<ins-gallery 
  with-indicato
  tooltip="This is a sample tooltip content. It also support html content."r>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t1.jpg"
    image="/assets/images/gallery/1.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t2.jpg"
    image="/assets/images/gallery/2.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t3.jpg"
    image="/assets/images/gallery/3.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t4.jpg"
    image="/assets/images/gallery/4.jpg">
  </ins-gallery-image>

</ins-gallery>
Zoomable State

Code Snippet

<ins-gallery 
  zoomable>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t1.jpg"
    image="/assets/images/gallery/1.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t2.jpg"
    image="/assets/images/gallery/2.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t3.jpg"
    image="/assets/images/gallery/3.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t4.jpg"
    image="/assets/images/gallery/4.jpg">
  </ins-gallery-image>

</ins-gallery>
Slidable State

Code Snippet

<ins-gallery 
  slidable>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t1.jpg"
    image="/assets/images/gallery/1.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t2.jpg"
    image="/assets/images/gallery/2.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t3.jpg"
    image="/assets/images/gallery/3.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t4.jpg"
    image="/assets/images/gallery/4.jpg">
  </ins-gallery-image>

</ins-gallery>
Slider Thumbnail Layout

Code Snippet

<ins-gallery 
  thumbnail-layout="slider">

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t1.jpg"
    image="/assets/images/gallery/1.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t2.jpg"
    image="/assets/images/gallery/2.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t3.jpg"
    image="/assets/images/gallery/3.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t4.jpg"
    image="/assets/images/gallery/4.jpg">
  </ins-gallery-image>

</ins-gallery>
Slidable image with slider thumbnail layout

Code Snippet

<ins-gallery 
  thumbnail-layout="slider">

    <ins-gallery-image
    thumbnail="/assets/images/gallery/t1.jpg"
    image="/assets/images/gallery/1.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t2.jpg"
    image="/assets/images/gallery/2.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t3.jpg"
    image="/assets/images/gallery/3.jpg">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="/assets/images/gallery/t4.jpg"
    image="/assets/images/gallery/4.jpg">
  </ins-gallery-image>

</ins-gallery>

 

<ins-gallery> Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
img-alt string - - Sets the gallery img alt attribute.
img-title string - - Sets the gallery img title attribute.
zoomable boolean false true, false Renders a zoom element that appears on image hover
slidable boolean false true, false Defines if the gallery image can be navigated with slide events but not zoomable
with-indicator boolean false true, false Hide or show the image indicator
thumbnail-layout string inline inline, slider Defines the layout of the gallery thumbnails

 

<ins-gallery-image> Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
thumbnail string - - Defines the img src for the image thumbnail
image string - - Defines the img src for the gallery image
img-alt string - - Sets the image thumbnail's img alt attribute.
img-title string - - Sets the image thumbnail's img title attribute.

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.