Simple Lightbox - click to open larger image and click to close

Hi Guys,
I also use other themes where the image elements include a “link to large image” check box. When checked, this allows website visitors to click an image to open to a larger view of the image. This larger view does not open a new page and includes a close image “X” option to close the larger image and return to the original page view. You can see examples here: https://www.stretchcvboot.com/cv-boots/
Is there a simple way of doing this with Pro theme? I have searched these forums and can see others asking for the same or similar feature. I have tried lightbox shortcodes and Essential Grid suggestions but can’t get lightbox shortcodes to work like example above and I find Essential Grid impossible to figure out. The lightbox shortcode and Essentials Grid options (if they worked) are painful and time consuming ways of trying to open and close a single image.
Thanks in advance for your help, I hope I am missing something and you can provide the simple solution that we are looking for. :slight_smile:

Hello @artisticdog,

Thanks for writing in! Have you tried using the Modal element in the builder?

You can enable the Graphic option as the Toggle for the Modal Element and then insert the bigger images as the modal content.

Your Element structure could be like this:

This is what I have on my test page:

Hope this helps.

Why is it soooo hard to enlarge an image?
It is normally a feature available using WPBakery Page Builder. Is there a way to use or select an Element using WPBakery? I have tried but cant find a way.
The Modal suggestion sort of works but not looking like the answer. Still definitely not simple. Why can I only see a small circle for the primary modal? See screenshot.

Hi @artisticdog,

You can also try the lightbox shortcode to get the enlarged image you are expecting. You can find the detailed documentation in the following link.

Alternatively, you can try using the bundled grid plugin name Essential Grid, which has the features you need. Please visit the links below for more details and plugin usage instructions.

Hope it helps.
Thanks

Solution found :slight_smile:
I have spent hours trying the above options with no success. Hopefully one day Themco come up with a simple solution.

I have found a free and simple solution that anyone can use very easily.
Install free plugin FooBox Image Lightbox https://fooplugins.com/foobox/
Select your chosen image element and select the source for your image.
(ie. from your media gallery)
Select Link for image and enter the URL for thr chosen image in the URL box.
Still on image element scroll down to Customize and enter “foobox” as Class
Done, works perfectly and takes seconds to set up.

1 Like

Hello @artisticdog,

Gald that you were able to get the proper solution for yourself, you may check this thread as well for lightbox with the Image element. Please feel free to open a new thread if you have any more concerns.

Thanks

I have been following the thread and cant make this method work.
So, with this method I need to use 2x elements on the page to achieve a single outcome, is that correct?
I placed the Image element onto a page and then configure as per in the thread.
I then placed the Raw Content element on the same page and configured.
Now when I click on the image I get the “you blew up the internet” message.
This is more work than using foobox and is not working for me.
Can you see anything wrong with how I followed the thread?
What else can I try?

Hello @artisticdog,

Please provide us access to your site so we can check your page element structure. You may have linked the image incorrectly which is why it goes to display the to an error 404 page. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Login details as requested.

Hello @artisticdog,

Regretfully the given credentials is not working for us. It seems that the given username or password is incorrect. Please double check it.

Thank you.

Updated credentials

Hello @artisticdog,

I have made a demonstration for both the Lightbox shortcode suggested by @Tristup and the use of Modal element which I have suggested.

Best Regards.

1 Like

Thank you very much @artisticdog. This makes life a lot easier!

1 Like

Hi Gerd,

Glad that it helps you too.

Hi @artisticdog,

If you still have any problems with this, please let us know about that.

Thanks

Thank you all very much for your help and assistance.
It is much appreciated :pray:

Hi @artisticdog,

Glad that we are able to help you.

Thanks

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