How to add captions to your lightbox gallery images in Squarespace

Squarespace lightbox does not have caption in the gallery, after you clicked on one of the images and opened the lightbox gallery. But of course you can hack this one with a moderate amount of Javascript code and a small amount of CSS code.

This is what we want to accomplish(The bridge in the park caption is the objective):

Let’s cut right to the chase, shall we?

document.querySelectorAll('.gallery-grid').forEach(gallery => {
    const id = gallery.getAttribute('data-section-id');
    const lightboxId = `data-lightbox-section-id="${id}"`;
    const lightboxItems = [...document.querySelectorAll(`.gallery-lightbox-outer-wrapper[${lightboxId}] figure`)];

    gallery.querySelectorAll('.gallery-grid-item').forEach((item,i) => {
        const caption = item.querySelector('.gallery-caption-content')?.textContent;
        if(caption) {
            const figcaption = `
                <figcaption>
                    ${caption}
                </figcaption>
            `;
            
            lightboxItems[i].insertAdjacentHTML("beforeend", figcaption);
        }
    });
});

This is the magic code that you add to Injections > Footer panel. This script will create for each lightbox gallery item a figcaption tag that will have the same caption as the one under the image(the original image, not the lightbox image).

To style this caption you need to add also some CSS to the Custom CSS panel next to the Injections link. In my example it is just a simple visual formatting so feel free to add something more complex(visually speaking).

.gallery-lightbox-item {
    position: absolute;
    bottom: -38px;
    background: #fff;
    padding: 10px;
    min-width: 300px;
    text-align: center;
}

If you care about how the code works, then please continue reading

We search for element with class name gallery grid, but we search for multiple instances, in case the you decide to put multiple galleries on the same page. Then we get the data-section-id attribute that has a unique number as value. The lightbox has a data-lightbox-section-id that has the same id number as the gallery grid data id number.

Now we iterate throught each gallery item and get each caption text. The lightboxItems constant will return an array with all the figure tags from the lightbox(that matched that specific data id value).

Finally if caption is not undefined we create a string with the caption’s html where we inserted in that string the caption from the original image and we append it into the DOM, one-by-one for each lightbox item.

That’s all, have fun!

0