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.
- Works with all Browsers. Web Components only work with modern Browsers, however a polyfill is available for IE and older mobile devices. The polyfill uses the DataFormsJS Framework to handle custom elements.
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">
Web Component
HTML for this Page