Adding a slide counter to GLightbox

[gingerchew]

This isn't a 100% sanctioned by the GLightbox staff answer, but its one that I use often and I know it is something a lot of people ask how to do so I figured I'd share. This is given AS IS, meaning if it doesn't work, I'm not really able to support you with it. It's made to work with GLightbox 3.2.0, but you will probably have luck with all of v3.

I'll do a small write up of how it works, but the CodePen is here if you want the TL;DR.

Problem: Modal needs a slide counter.

Solution: Add a slide counter.

Steps:

• Count number of slides
• Add HTML to modal
• Update on navigation
  • Bonus: Check for manually inserted slides
• Clean up on close

With those in mind this is how I went about it:

// Set up our global-esque variables (This assumes we are inside of an ESM context)
let lightbox = null,
    elementsLength = 0;

// I'll be using some CSS trickery, but also offer an alternative in the post credits
const counterHTML = `<p data-counter class="gcounter"></p>`

Setup done, lets write our functions. We are ultimately doing 3 things; inserting, updating, removing. Let's set up when we want these functions to run.

// On pageshow, init GLightbox, set up variables, and add event listeners
addEventListener('pageshow', () => {
    lightbox = GLightbox();
    elementsLength = lightbox.elements.length;

    lightbox.on('open', () => /* Add Counter */);

    lightbox.on('slide_before_change', () => /* Update Counter */);

    /* Remove Counter needs to be handled in a special way */
});

These are the general events that will work for now, but I want to control these with a little bit more flexibility. I'm going to write an function to handle the different events in one place.

const runCounter = (lightbox, prev, current) => {
    const {
        modal,
        index
    } = lightbox;

    // Add counter only if we're opening the modal
    // Which we have determined since there is
    // no previous or current slide on the 'open' event
    if ([prev, current].includes(undefined)) {
        addCounter(lightbox.modal);

        const closeBtn = modal.querySelector('.gclose');

        // Remove counter when button is clicked
        closeBtn.addEventListener('click', () => removeCounter(modal), {
            once: true
        });
    }

    updateCounter(modal, index);
}

Now let's write the individual functions that will do the actual work.

// insert the counterHTML right before the close button
const addCounter = modal => modal.querySelector('.gclose').insertAdjacentHTML('beforebegin', counterHTML);

const updateCounter = (modal, activeSlideIndex) => {
    // If we needed to check for manually inserted slides we could add this line here
    // elementsLength = lightbox.elements.length;
    modal.querySelector('[data-counter]').dataset.counter = `${activeSlideIndex + 1} / ${elementsLength}`;
}

const removeCounter = modal => modal.querySelector('.gcounter').remove();

Then with just a bit of CSS

.gcounter::after {
	content: attr(data-counter);
}

Our counter updates on each slide change and on open.

You can checkout the full codepen here.

A final note close event

For true compatibility, the removeCounter function would need to run on not just the button click event but also on the escape key press event, or on any other close modal method. The reason for using that instead of the close event is to prevent the counter from lagging behind after the modal has already transitioned out. Using the click and keypress events lets us remove it from the DOM outright.