DataFormJS [imageGallery] Framework Plugin with Handlebars

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] or [alt] of the image with index position by default. [title] and [alt] are not required and index can be hidden through CSS if desired.
• Displays a loading indicator if an image takes longer than 2 seconds to load. The text and timeout can be changed through the API.
• 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.2 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.

Full Source Code

• JavaScript Code
• HTML for this Page

Example Usage and Code

                    <!--
    Include plugin [js/plugins/imageGallery.min.js]

    Add attribute [data-image-gallery] and optional [title] or [alt]
    to an <img> or other element for each image.
-->
<img
    src="{{thumbnail}}"
    data-image-gallery="{{image}}"
    alt="{{title}}">

<div
    class="card-image"
    style="background-image: url({{thumbnail}});"
    data-image-gallery="{{image}}"
    title="{{title}}"></div>

<!--
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 plugin 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">