Opening Gallery Element Lightbox from Button

How To
1

I’m having trouble using the gallery element to open the lightbox from a button.

Here’s my scenario:

  • The gallery element contains more than four images.
  • I’m using CSS to hide all images after the fourth one, so only four are initially visible.
  • There’s a “Load More Images” button that should:
    • Open the gallery lightbox when clicked.
    • Allow users to navigate through all images in the lightbox.

What I’ve tried:

  • I set the button link to “Lightbox Image (no image is selected here)”.
  • Under “Lightbox ID,” I used the gallery element ID, which is “mfchpl” (the same as the data-script-id="mfchpl" value of the gallery element).
  • However, when I click the button, it displays an error message: “The image cannot be loaded.”

Does anyone know how this can be achieved?

1 Like
2

What if you open a popup with the gallery when you click on the button?

3

For anyone else trying to do same in future, here is a JS solution as provided by @itchycode

You cannot set your Load More button as a lightbox link without an image.

You can achieve this by using custom JavaScript function

<script>

function myOpenGalleryLightbox() {
    firstImage = document.querySelector('[data-script-id="mfchpl"] img')

    if( firstImage ) {
        firstImage.click()
    }
}
</script>

If you want the button to open the fifth image (starts from the fifth image inside lightbox)
Change to this document.querySelector('[data-script-id="mfchpl"] li:nth-of-type(5) img')

Then add a click interaction on the button to call the function on click or add an onclick atrribute like onclick="myOpenGalleryLightbox()"

6 Likes
4

Nice!

The gallery element bricks ID is also the data script id, I was busy inspecting HTML code before.

Thanks for sharing!