Custom video and image gallery based on the GLightbox library

A custom image and video gallery is a great way to showcase your work in a unique way. It can be integrated with any website, blog or landing page.

The GLightbox library is an open source JavaScript library that provides an elegant lightbox window that displays images and videos in the center of the screen. It comes with various features such as slideshow, autoplay, responsive design, fullscreen mode and more.

This snippet will show how to implement GLightbox library to create a custom gallery with image and video elements. There is an example from https://theydoagency.com/work/aetna-better-health below:

Elements that need to appear in gallery:

The elements that need to appear inside the gallery have an extra data-media-link attribute:

<a data-media-link="true" class="acf-block-media__video-wrapper d-flex align-items-center image-link-icon overflow-hidden"></a>

All of the data-media-link specified elements are collected and passed to the function that creates the GLightbox gallery. The element may be an image or iframe so we need to determine the type and create a proper object. Each gallery object is pushed to the array of GLightbox elements.

GLightbox gallery elements

What is more, there is a click event on each of the data-media-link element which opens the GLightbox gallery at an element with an index of clicked element.

import GLightbox from "glightbox";

const mediaLightbox = () => {
    // get all elements that have to be inserted into the lightbox
    const glightboxElements = [];
    const glightboxLinks = document.querySelectorAll("[data-media-link]");
    // get page title and use it as lightbox main title
    const glightboxTitle = document.querySelector(".acf-block-media").dataset.title;

    // iterate through all media links and create lightbox elements as objects
    [...glightboxLinks].forEach((link, index) => {
        const linkChild = link.firstElementChild;
        if (linkChild.tagName == "IMG") {
            const elemObj = {
                "href": linkChild.dataset.src,
                "type": "image",
                "title": glightboxTitle
            };
            glightboxElements.push(elemObj);
        }

        if (linkChild.tagName == "IFRAME") {
            const elementSrc = linkChild.src.replace("controls=0", "controls=1");
            const elemObj = {
                "href": elementSrc + "&autoplay=1",
                "type": "external",
                "width": "100%",
                "height": "100%",
                "title": glightboxTitle,

            };
            glightboxElements.push(elemObj);
        }

        // on link click open lightbox and set the clicked element as active element
        link.addEventListener("click", () => {
            glightbox.openAt(index);
            glightbox.sourceElement = link;
        });
    });

    // init lightbox
    const glightbox = GLightbox({
        elements: glightboxElements,
        touchNavigation: true
    });

    // when opening lightbox check if the link is a video - if so then autoplay and show controls
    glightbox.on("open", () => {
        const iframes = glightbox.activeSlide.querySelectorAll("iframe[src*='controls=0']");

        [...iframes].forEach((iframe) => {
            if (!iframe) return;
            iframe.src = iframe.src.replace("controls=0", "controls=1");
            glightbox.currentPlayer = new Player(iframe);
            glightbox.currentPlayer.play().then(() => {}).catch(error => {
                new Error(`Vimeo Player Error: ${error}`);
            });
        });
    });
};