gallery.js

/*
---
name: Image Gallery
category: Javascript
example: https://www.uspoloassnglobal.com/collections/Polo-Player-Inspired
description: Load the optimal image size for each tile: Get the clients screen resolution and multiply it by the dimensions of the tile. If client changes media query, then refresh these images.
---
```
*/

import { BREAKPOINT } from '@/Scripts/constants'
import AOS from 'aos'

export function init(el, refeshItems) {
    const galleryContainer = el
    const galleryItems = [].slice.call(galleryContainer.querySelectorAll('.Collection-item'))
    const resolution = window.devicePixelRatio

    // Remove the photo tiles if media query changes. Not called on intial page load.
    if (refeshItems) {
        galleryItems.forEach(galleryItem => {
            galleryItem.removeChild(galleryItem.querySelector('img'))
        })
    }

    galleryItems.forEach((lazyImage) => {
        let entry = lazyImage
        let imageWidth = Math.round(entry.offsetWidth * resolution)
        let imageHeight = Math.round(entry.offsetHeight * resolution)
        let imagePath = `${entry.dataset.img}?fit=fill&w=${imageWidth}&h=${imageHeight}&f=faces&q=75`
        let imageAlt = entry.dataset.alt
        let galleryImage = document.createElement('img')

        galleryImage.alt = imageAlt

        if (!entry.querySelector('img')) {
            entry.appendChild(galleryImage)
            galleryImage.src = imagePath
            galleryImage.onload = function() {
                galleryImage.classList.add('is-loaded')
            }
        }
    })

    // Start the animate on scroll library
    AOS.init()

    // Reinit the photos when the media query changes from/to mobile, tablet, desktop.
    // BREAKPOINT.MEDIUM.MIN === 769
    window.matchMedia(`(min-width: ${BREAKPOINT.MEDIUM.MIN}px)`).onchange = () => {
        init(document.querySelector('[data-ondemand="gallery"]'), true)
    }

    // BREAKPOINT.LARGE.MIN === 1440
    window.matchMedia(`(min-width: ${BREAKPOINT.LARGE.MIN}px)`).onchange = () => {
        init(document.querySelector('[data-ondemand="gallery"]'), true)
    }
}