Animated Gallery

Display a list of images with animations

Use the AnimatedGallery component to display a collection of images with animations on hover, creating a dynamic visual experience. They are great for creating immersive, interactive marketing sections on lading pages, and can be used to showcase product images, portfolios, or project highlights.

<AnimatedGallery images={[{
    src: '/img.png',
    alt: 'Alternate text',
    width: 125,
    height: 200
}, { ... }]} />

To create the gallery, pass an array of image objects to the images prop with the following possible properties:

• src: Sets the path to the image.
• alt: Sets an alternate text for the image.
• width and height: Sets the width and height of the image.
• lazy: Optionally, set the lazy property to true to lazy-load the image.

Opening Images in Modal

You can use the AnimatedGallery with the Modal component to open images in a modal. To achieve this, create a new and add the following code after importing AnimatedGallery and Modal:

<AnimatedGallery
    images={[ ... ]}

    className="modal-gallery"
/>

<Modal className="modal" transparent={true} />

<script>
    import { closeModal, modal, on } from 'webcoreui'


    let img: HTMLElement


    on('.modal-gallery', 'click', (event: Event) => {
        img = event.target as HTMLElement
    })

    modal({
        trigger: '.modal-gallery',
        modal: '.modal',
        onOpen({ modal }) {
            if (img.nodeName !== 'IMG') {
                closeModal('.modal')
            }


            const modalImg = img.cloneNode() as HTMLImageElement

            modalImg.style.width = '100%'
            modalImg.style.height = '100%'

            modal.innerHTML = ''
            modal.appendChild(modalImg)


            modalImg.addEventListener('click', () => {
                closeModal('.modal')
            })
        }
    })
</script>

<style lang="scss" is:global>
    @use 'webcoreui/config' as *;

    .modal-gallery img {
        cursor: pointer;
    }
</style>

1. Create your AnimatedGallery component with the className prop to target it later in JavaScript.
2. Create an empty transparent Modal component.
3. Create an img variable that can hold reference to the currently selected image.
4. Create a click event listener for the AnimatedGallery component, and assign the clicked image to the img variable.
5. When creating the modal instance, specify the onOpen method to run code when the modal is opened. Set the image dimensions to 100% and append it to the modal. Don’t forget to remove previous content by setting innerHTML to an empty string.
6. Add a click event listener on the opened modal image and call the closeModal method to close the modal when the user clicks on it.
7. Optionally, you can add some CSS to change the cursor to pointer to indicate to users that the image is interactive.

API

type AnimatedGalleryProps = {
    images: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }[]
    className?: string
}