Insites Docs Web Components V2GeneralGallery

Gallery

Last updated on July 29, 2025.

Element: <ins-gallery>

Creates a responsive gallery that lazy loads images from thumbnails.

Complete Example

Code Snippet

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

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/e9da5e14-1172-4fef-9268-4142a55c90a7/t1.jpg?updated=1722590369"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eda7d8ce-1e7d-4618-93ce-481fcdb8712b/1.jpg?updated=1722590364">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eddbcc27-8497-4d9c-aa32-982ce778ff9a/t2.jpg?updated=1722590370"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/391f34de-ff82-417f-ad0d-4a05f2ecb3ec/2.jpg?updated=1722590365">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/3adab618-fc83-432b-8548-cbb6db4c115d/t3.jpg?updated=1722590372"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/95bc68c2-a6e6-4800-8489-bd04394f6c11/3.jpg?updated=1722590366">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/d3cf37dd-de54-4397-814a-5ea45706405a/4.jpg?updated=1722590368"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/547a24d4-6ee7-4ddf-af89-5326bd867773/t4.jpg?updated=1722590373">
  </ins-gallery-image>

</ins-gallery>
Zoomable State

Code Snippet

<ins-gallery 
  zoomable>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/e9da5e14-1172-4fef-9268-4142a55c90a7/t1.jpg?updated=1722590369"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eda7d8ce-1e7d-4618-93ce-481fcdb8712b/1.jpg?updated=1722590364">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eddbcc27-8497-4d9c-aa32-982ce778ff9a/t2.jpg?updated=1722590370"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/391f34de-ff82-417f-ad0d-4a05f2ecb3ec/2.jpg?updated=1722590365">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/3adab618-fc83-432b-8548-cbb6db4c115d/t3.jpg?updated=1722590372"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/95bc68c2-a6e6-4800-8489-bd04394f6c11/3.jpg?updated=1722590366">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/d3cf37dd-de54-4397-814a-5ea45706405a/4.jpg?updated=1722590368"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/547a24d4-6ee7-4ddf-af89-5326bd867773/t4.jpg?updated=1722590373">
  </ins-gallery-image>

</ins-gallery>
Slidable State

Code Snippet

<ins-gallery 
  slidable>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/e9da5e14-1172-4fef-9268-4142a55c90a7/t1.jpg?updated=1722590369"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eda7d8ce-1e7d-4618-93ce-481fcdb8712b/1.jpg?updated=1722590364">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eddbcc27-8497-4d9c-aa32-982ce778ff9a/t2.jpg?updated=1722590370"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/391f34de-ff82-417f-ad0d-4a05f2ecb3ec/2.jpg?updated=1722590365">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/3adab618-fc83-432b-8548-cbb6db4c115d/t3.jpg?updated=1722590372"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/95bc68c2-a6e6-4800-8489-bd04394f6c11/3.jpg?updated=1722590366">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/d3cf37dd-de54-4397-814a-5ea45706405a/4.jpg?updated=1722590368"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/547a24d4-6ee7-4ddf-af89-5326bd867773/t4.jpg?updated=1722590373">
  </ins-gallery-image>
</ins-gallery>
Slider Thumbnail Layout

Code Snippet

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

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/e9da5e14-1172-4fef-9268-4142a55c90a7/t1.jpg?updated=1722590369"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eda7d8ce-1e7d-4618-93ce-481fcdb8712b/1.jpg?updated=1722590364">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eddbcc27-8497-4d9c-aa32-982ce778ff9a/t2.jpg?updated=1722590370"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/391f34de-ff82-417f-ad0d-4a05f2ecb3ec/2.jpg?updated=1722590365">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/3adab618-fc83-432b-8548-cbb6db4c115d/t3.jpg?updated=1722590372"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/95bc68c2-a6e6-4800-8489-bd04394f6c11/3.jpg?updated=1722590366">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/d3cf37dd-de54-4397-814a-5ea45706405a/4.jpg?updated=1722590368"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/547a24d4-6ee7-4ddf-af89-5326bd867773/t4.jpg?updated=1722590373">
  </ins-gallery-image>

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

Code Snippet

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

   <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/e9da5e14-1172-4fef-9268-4142a55c90a7/t1.jpg?updated=1722590369"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eda7d8ce-1e7d-4618-93ce-481fcdb8712b/1.jpg?updated=1722590364">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eddbcc27-8497-4d9c-aa32-982ce778ff9a/t2.jpg?updated=1722590370"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/391f34de-ff82-417f-ad0d-4a05f2ecb3ec/2.jpg?updated=1722590365">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/3adab618-fc83-432b-8548-cbb6db4c115d/t3.jpg?updated=1722590372"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/95bc68c2-a6e6-4800-8489-bd04394f6c11/3.jpg?updated=1722590366">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/d3cf37dd-de54-4397-814a-5ea45706405a/4.jpg?updated=1722590368"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/547a24d4-6ee7-4ddf-af89-5326bd867773/t4.jpg?updated=1722590373">
  </ins-gallery-image>

</ins-gallery>
Activate Method

Code Snippet

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

  <ins-gallery-image
                     thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/e9da5e14-1172-4fef-9268-4142a55c90a7/t1.jpg?updated=1722590369"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eda7d8ce-1e7d-4618-93ce-481fcdb8712b/1.jpg?updated=1722590364">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/eddbcc27-8497-4d9c-aa32-982ce778ff9a/t2.jpg?updated=1722590370"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/391f34de-ff82-417f-ad0d-4a05f2ecb3ec/2.jpg?updated=1722590365">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/3adab618-fc83-432b-8548-cbb6db4c115d/t3.jpg?updated=1722590372"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/95bc68c2-a6e6-4800-8489-bd04394f6c11/3.jpg?updated=1722590366">
  </ins-gallery-image>

  <ins-gallery-image
    thumbnail="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/d3cf37dd-de54-4397-814a-5ea45706405a/4.jpg?updated=1722590368"
    image="https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/547a24d4-6ee7-4ddf-af89-5326bd867773/t4.jpg?updated=1722590373">
  </ins-gallery-image>

</ins-gallery>

<ins-input
  id="galleryInput"
  label="Index"
  tooltip="Minimum 0; Maximum 3">
</ins-input>
<ins-button
   id="btnGallery"
  label="Select"
  solid>
</ins-button>

<script>
  const galleryEl = document.getElementById('galleryEl');
  galleryEl.addEventListener('insChange', event => {
    console.log(event);
  });

  const galleryInput = document.getElementById('galleryInput');
  const btnGallery = document.getElementById('btnGallery');
  btnGallery.addEventListener('insClick', () => {
    galleryEl.activate(galleryInput.value);
  });
</script>

 

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

 

Event

 

EVENT OBJECT DESCRIPTION
insChange index, src, target Execute a script when gallery slide is changed

 

Method

 

EVENT PARAMS DESCRIPTION
activate index Use for manually activating gallery slide via index
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.