DataFormsJS React Component <ImageGallery>

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 position by default. Both labels can be hidden through CSS.
• Displays a loading indicator if an image takes longer than 2 seconds to load. The text and timeout can be changed by setting props [loadingText] and [loadingTimeout].
• Supports next-gen image formats AVIF and WebP by using optional props [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 - Standalone Script is 4.2 kB when gzipped and minified or it adds about 3 kB when bundled with other React code using webpack.
• 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

• React Component
• HTML for this Page

Example Usage and Code

                    <!--
npm install dataformsjs

// Import <ImageGallery> using one of the following options:
//
import { ImageGallery } from 'dataformsjs/js/react/es6/DataFormsJS';
import ImageGallery from 'dataformsjs/js/react/es6/ImageGallery';

// Or include JavaScript file directly:
-->
<script type="module" src="dataformsjs/js/react/es6/ImageGallery.min.js"></script>
<script nomodule src="dataformsjs/js/react/es5/ImageGallery.min.js"></script>

<!--
// Define Array of Images
const images = [
    {
        thumbnail: "{url}",
        image: "{url}",
        title: "{optional text}"
    },
    {
        thumbnail: "{url}",
        image: "{url}",
        image_avif: "{optional url}",
        image_webp: "{optional url}",
        title: "{optional text}"
    },
];

// Example Optional Image Template
function AppImage(props) {
    return <img
        src={props.thumbnail}
        alt={props.title}
        tabIndex={props.tabIndex}
        onClick={props.onClick}
        onKeyDown={props.onKeyDown}
        key={props.key}
        style={{
            cursor: 'pointer'
        }} />
}
-->
                    
<!-- 1) Using a basic image - no template specified -->
<ImageGallery images={props.data.images} />

<!-- 2) Include [tabIndex] so users can tab from keyboard -->
<ImageGallery images={props.data.images} tabIndex={5} />

<!-- 3) Specify custom template using [template] attribute -->
<ImageGallery images={props.data.images} template={<AppImage />} />

<!-- 4) Specify Template as a Child Element -->
<ImageGallery images={props.data.images}>
    <AppImage />
</ImageGallery>

<!-- 5) Specify a Different Loading Message and Timeout.
Defaults to "Loading..." and 2000 milliseconds. -->
<ImageGallery
    images={props.data.images}
    loadingText="Carregando..."
    loadingTimeout={1000} />

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