lightboxcontroller.js

import "lightgallery.js";

export default class LightboxController {
    constructor() {
        this.init();
    }

    init() {
        let lightbox = document.querySelectorAll(".js-lightbox");

        if (lightbox.length < 1) {
            return;
        }

        // get all galleries on page
        for (let i = 0; i < lightbox.length; i++) {
            // get all single gallery childs
            let singleThumbs = lightbox[i].querySelectorAll(
                ".js-lightbox-single",
            );

            // check if there are more than two children
            if (singleThumbs.length > 2) {
                // get all children and hide all but first two
                for (let i = 0; i < singleThumbs.length; i++) {
                    if (i > 1) {
                        singleThumbs[i].style.display = "none";
                    }
                }

                // create show more link
                let showMore = document.createElement("a");
                // get the href from third child because third child is now show more link, not image
                showMore.href = singleThumbs[2].href;
                // add css classes to style the element
                showMore.classList.add(
                    "c-lightbox-gallery__single",
                    "c-lightbox-gallery__single--show-more",
                );
                showMore.setAttribute("data-no-swup", "data-no-swup");
                // inject number that represents how many images are remaining
                showMore.innerHTML = `<span class="u-a3">${singleThumbs.length -
                2}+</span>`;
                // insert the show more link as a third child
                this.insertAfter(showMore, singleThumbs[1]);
                // remove the third image from DOM because show more link is now third child
                singleThumbs[2].remove();
            }

            // init the lightbox
            lightGallery(lightbox[i], {
                download: false,
            });
        }
    }

    insertAfter(newNode, referenceNode) {
        referenceNode.parentNode.insertBefore(
            newNode,
            referenceNode.nextSibling,
        );
    }
}