Display another image when clicking

Hello.

We’ve set up a simple gallery that shows different images… what we want to accomplish is that once someone clicks on one of the images a “different” image is displayed on top as a “light box”. Similar to what an Envira Gallery does, except that we need those lightbox images to be something else…

How can we accomplish this? Can you please help? I’ve included a link on a private note.

Hello Jacko,

The image element does not have the feature that you have described although it is possible by adding some customizations but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

However, I have checked our feature request list and this was already added. Please note all of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thank you.

Thank you for your reply.

Do you have a time frame as to when this new feature will be enabled?

Thanks!

Hi @Jacko_Pinto,

Unfortunately, we can’t promise a timeframe. A feature will be discuss by the developers and it’s implementation usually depends on the amount of request we receive. The most popular feature request usually takes precedence. Thank you for understanding.

I understand. Thanks very much for all your help.

Hi @Jacko_Pinto,

There is actually a way to do that as I see you’re using an Image element. First, you need to enable the Link option of your images so they can be clickable.

Then put the URL of the image that you want to show on the lightbox, correspond to the link image element.


Do this for all your images. Now, this is where the magic happens, add a class lbx to each of your images, that is the selector that we will be using to trigger the lightbox.


Now add this lightbox shortcode on the bottom of your page, you can paste it on a Content Area element.

[lightbox selector=".lbx" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

Save your page and test the lightbox.

Hope it helps,
Cheers!

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