Element: <ins-gallery>
Creates a responsive gallery that lazy loads images from thumbnails.
Code Snippet
<ins-gallery
with-indicato
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>
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>
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>
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>
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>
<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. |
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.