DataFormsJS React Component <ImageGallery>

Image Gallery

Features

GitHub Full Source Code

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