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

Site URL: https://vibraphone-spinach-2age.squarespace.com/

Hi - Password: Adameus1

Click "Folio 2" up top.  When someone clicks on a property and it goes to a lightbox, the arrows make it impossible to know what property the customer is looking at when they click left and right.  So I need to either disable the left and right arrow buttons OR add a static caption.  Can anyone help?

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!

this is great (losing the arrows)...would be perfect ion anyone can figure out how to disable the left right arrows!  Making this work would eliminate the need for static captions on the lightbox,

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;
}