In the editor make the image you placed there a link and link it to itself.
Then, paste the following class into the HREF tag (not the image tag).
class=”et_pb_lightbox_image”
So, your link will look something like this:
[php]
[/php]
Click the image below to see it work.
Need help with this?
Hire me for a consultation and I'll walk you thru the process.
"WOW! Money WELL spent. Joseph was incredibly knowledgeable in helping me make some final tweeks to my Divi website. He was very caring and went above and beyond. Will 100% use him for any future Divi website needs."
Claire - CMMC
"You really get what you pay for with Joe. He does more than simply build a website, he sets up websites for success. Functional, clean, professional designs and he keeps up/implements the latest plugins and technology. Thank you Joe. I will continue to refer you work."
Mark Winger
"The best WordPress guy I’ve worked with on WordPress, hands-down (and I’ve worked with dozens). Remarkably good with theme customizations with a quick turn. Kept it on budget as well. A rarity with hourly contracts."
Nate Wright
"Thanks for your prompt reply. You’re always so comprehensive. If we could write another review just for your communication skills, then we would."
Alex N
More Tips
"*" indicates required fields
A full service web design company.
This no longer works Divi v. 4.9.2 WP v. 5.7 🙁
Hi Paka,
It’s still working on the image above and the site is on Divi v. 4.9.2 and WP v. 5.7.
Hi, I’ve added the et_pb_lightbox_image class to a button and it works almost perfect for me, but after closing the lightbox it won’t reopen. Do you know why this is?
Example
vultostore.levelupwebdesign.nl/product/herringbone-alpaca-coat-2/
This Divi Tip helped me figure my problem out. Thank you.
Also you don’t need to add a plug-in, and it should be future-proof because it uses a class.
This works great for images inserted in text – for instance in a blog post. I didn’t want clients to have to use the Divi Builder for blog posts, but I wanted the images inserted in posts using the text editor to open in a lightbox.
For images inserted in a blog post:
1. Insert image in text using the button “add Media”
2. click on image – a small pop up will appear with positioning icons and a pencil icon (edit). Click on the pencil icon.
3. a dialog box will appear with “image details”. Here you can fill in alt text, caption, alignment etc. Under “Link To” choose “Media File”
4. Choose also “Advanced options” dropdown, and here after “Link CSS Class” write “et_pb_lightbox_image” (without the quotation marks)
Would there be any way to get multiple images posted through the text or code editor to open in the same lightbox so one could advance through a gallery of images rather than loading one at a time? There’s Javascript out there for grouping individual Divi Image module images to a single lightbox through CSS classes. Am hoping to find something similar for images through text or code modules.
This still works if you have a hidden image module that has a any picture with the lightbox option activated.