Jump to content

gallery block lightbox - either remove left/right arrows OR make static caption on image

Recommended Posts

Getting the caption to show on a lightbox is tricky, there are a number of threads on the forum looking for the answer, this is one of them:

If you want to hide the gallery arrows you can use this, but it won't stop you using keyboard arrows:

.gallery-lightbox-controls {
    display: none !important;
}

Hope this helps a little!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

In the meantime I was experimenting with this and I came up with this code, if you are still interested to have dinamic captions.

First you add a script in in the Injections section:

<script>
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);
        }
    });
});
</script>

In custom CSS you style that caption:

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

 

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.