Lightbox and Image Link

Hello,

I’ve been using the Lightbox element and I am having a problem with user experience once it’s been implemented.

Currently when a user clicks on an image it opens up the lightbox which displays a large featured image and thumbnails of the rest of the images below it. The problem is that the lightbox always defaults to the first image of the gallery, for the large featured image, instead of displaying the image that the user clicked on.

Is there a way to set the lightbox gallery so that when a user clicks on an image, the lightbox displays the image they clicked on instead of displaying the first image in the gallery?

Thanks,

James


Here is my public share link: http://paul-gregory.webflow.io/sample-gallery-1
(how to access public share link)

1 Like

For those who come across this thread, I found cause of my problem and the solution. So I will document it here for anyone who is looking for a fix.

It turns out I was using the Lightbox Link element incorrectly. What I was doing was creating 1 lightbox and loading it up with multiple images. I also was putting rows into the lightbox with the Flex setting on it and then adding multiple div’s with image elements inside them into that row. For some reason I expected all this to link up (lol yea yea, mistake).

Here are some images to demonstrate what I’m talking about:

The problem was that the Lightbox would always display the first image of the gallery instead of displaying the image a user clicked on.

Here is the solution:

Instead of creating rows inside of 1 Lightbox, I create 1 container Div with Flex that had multiple Lightboxes in it. Each of these Lightboxes are then linked with the same Group name and 1 unique image loaded into it. Here are some images to demonstrate this:


By building my Lightboxes in this manner, I can still use the power of Flex and have the Lightbox functionality without any custom code or custom interactions, and it fixes the user experience by displaying the image that a user clicks on while still maintaining all the thumbnails at the bottom.

Hope all that made sense.

2 Likes

And here it is with the final implementation: http://paul-gregory.webflow.io/sample-gallery-2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.