Features
- Shows Overlay with large Image for Thumbnails.
- Minimal UI so the focus is on the Content.
- Easy to use from any device and fully accessible.
- Handles Swipe left/right and Tap to close on Mobile Devices.
- Fully works on Desktop or Laptop Computer from Mouse. Click to open gallery and Back and Forward buttons are displayed when using a Mouse.
- Fully works from a Keyboard. If using [tabindex] so thumbnails can be selected a spacebar can be used to open the gallery and Left/Right/Escape Keys can be used for navigation.
- Displays [title] of the image with Index by default. If [title] is not included and a child <img> element with an [alt] attribute is used then the [alt] text will be used as the overlay title.
- Displays a loading indicator if an image takes longer than 2 seconds to load. The text and timeout can be changed by setting attributes [loading-text] and [loading-timeout].
- Supports next-gen image formats AVIF and WebP by using optional attributes [image-avif] and [image-webp]. When using next-gen image formats a default/fallback [image] must be included similar to how the HTML <picture> element works.
- Image loading is optimized so that large images are loaded only when viewed and the previous and next images preloaded while the user is viewing the focused image.
- Overlay style and layout can easily changed with CSS.
- Small Download - 3.0 kB when gzipped and minified.
- The code exists in a single file so it's easy to copy and modify if changes or portions of it are needed as part of a custom app.
- Because this is a Web Component it only works with modern Browsers. For support with IE or old Mobile Devices use the standard DataFormsJS Framework or the React Version.
Full Source Code
Example Usage and Code
<!--
Include component on page
-->
<script type="module" src="dataformsjs/js/web-components/image-gallery.min.js">
</script>
<!--
Include an <img> within the <image-gallery> and
specify [image] and optional [title] attribute on the <image-gallery>
If [title] is not included [alt] from the <img> can be used.
-->
<image-gallery image="${image}">
<img src="${thumbnail}" alt="${title}" />
</image-gallery>
<!--
Or simply include a background image on the <image-gallery> element.
This example uses a custom loading message and timeout.
-->
<image-gallery
image="${image}"
style="background-image: url('${thumbnail}');"
title="${title}"
loading-text="Carregando..."
loading-timeout="1000">
</image-gallery>
<!--
Supports next-gen image formats AVIF and WebP by using
optional attributes [image-avif] and [image-webp].
When using next-gen image formats a default/fallback [image]
must be included similar to how the HTML <picture> element works.
-->
<image-gallery
image="${image}"
image-avif="${image_avif}"
image-webp="${image_webp}">
<img src="${thumbnail}" alt="${title}" />
</image-gallery>
<!--
To override default styles use `!important` and specify the style
attributes to override in any style sheet on the page or define your
own style sheet before the component runs using id `image-gallery-css`.
-->
<style>
.image-gallery-overlay { background-color: black !important; }
.image-gallery-overlay { background-color: rgba(0,0,0,.7) !important; }
.image-gallery-overlay .btn-previous,
.image-gallery-overlay .btn-next { background-color: blue !important; }
</style>
<style id="image-gallery-css">...</style>
<link rel="stylesheet" id="image-gallery-css" href="css/image-gallery.css">