If your Divi Theme posts / pages contain links to images, those images will open in their own tab within the browser window. This lets people view your images, but it doesn't look as nice as opening images in a popup lightbox. Fortunately, it is possible to convert images within Divi posts / pages to open in a lightbox.
Open Image Links in a Lightbox using Divi Booster
Divi Booster includes the option to open image links in a lightbox. It works on both linked images and text links to image files.
You'll find the option on the Divi Booster settings page at:
Site-wide Settings > Links > Open linked images in a lightbox
NB: In earlier versions of Divi Booster (v2.6.7 – v2.8.6), the feature was located on the Divi Booster settings page at "Posts > Open linked images in a lightbox", and worked on posts only (not pages).
Open Image Links in a Lightbox using Divi Lightbox for Images
The free Divi Lightbox for Images plugin enables linked images (i.e. images that are surrounded by a link to an image) to be opened in a lightbox.
Open Image Links in a Lightbox using jQuery / PHP
If you want to enable image links in to open in a lightbox without using a plugin, here is the jQuery code to do so:
<script data-name="dbc_links_in_lightbox">
jQuery(function($) {
var $links = $('.entry-content a, .et_pb_post_content a').filter(db_is_image_link).not(db_is_gallery_image_link);
$links.filter(db_has_child_img).addClass('et_pb_lightbox_image');
$links.not(db_has_child_img).magnificPopup({type:'image'});
function db_has_child_img() {
return ($(this).children('img').length);
}
function db_is_image_link() {
return (/.(?:jpg|jpeg|gif|png|bmp)$/i.test($(this).attr('href')));
}
function db_is_gallery_image_link() {
return ($(this).parent().hasClass("et_pb_gallery_image"));
}
}
);
</script>Related Post: Adding JavaScript / jQuery to Divi.
add_action('wp_enqueue_scripts', 'dbc_lightbox_images_register_magnific_popup', 11); // Enqueue later than 10 to avoid triggering child theme enqueued stylesheet detection in et_divi_enqueue_stylesheet()
function dbc_lightbox_images_register_magnific_popup() {
if (!defined('ET_BUILDER_URI') || !defined('ET_CORE_VERSION') || version_compare(ET_CORE_VERSION, '4.10', '<')) { return; }
wp_enqueue_style('dbc-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/css/magnific_popup.css', array(), ET_CORE_VERSION);
wp_enqueue_script('dbc-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/js/magnific-popup.js', array( 'jquery' ), ET_CORE_VERSION, true);
}Related Post: Adding PHP to the Divi Theme
WP Rocket Compatibility
If you're using WP Rocket's "Delay JavaScript Execution" feature, adding the following exclusions should ensure the code works correctly:
dbc_links_in_lightbox
/feature/dynamic-assets/assets/css/magnific_popup.css
/feature/dynamic-assets/assets/js/magnific-popup.jsEnabling Linked Images in a WordPress Gallery Block
If you are using the WordPress Gallery block in Gutenberg, you can add links to the images in the gallery block so that they link to a larger view of the image. Here's how you can do it:
1. Add a gallery block to your WordPress post or page.
2. In the gallery block, click on the specific image you want to add a link to. This will bring up the image settings bar.
3. In the image settings, locate the "Link" icon and select the "Media File" option from the drop-down menu (as shown in the screenshot below). This will set the image to link to the larger version of the image.
4. Repeat this process for each image in the gallery block, setting them all to link to the "Media File".
Once you've added the links to the images, clicking on the image will usually open the larger version of the image in a new browser tab or window, but if you follow the instructions earlier in this post the image will open in a lightbox instead.
If you are using the Theme Builder post content module on a single post, you need to replace $('.entry-content a') with $('.et_pb_post_content a') for it to work. Hope this helps for anyone looking for this.
Hi Christian, thanks for pointing that out – you're right. I've updated the code above to handle both cases. Cheers!
(side note: the Divi Booster feature mentioned already includes this enhancement).
Hello, does anyone know a way to have more than one image in a lightbox?
Hi Alan, one way is to use the Divi gallery module – all the images in the gallery will show up in the lightbox. An alternative, if you have multiple individual image modules on the page and want them to all appear in the same lightbox (as they would if they were part of the same gallery), you can do this:
https://divibooster.com/open-images-in-lightbox-groups/
If neither of those will do what you need, perhaps you can share an example of a page where you'd like to have the images shown in the lightbox, or describe in a bit more detail what you want to achieve? Thanks!
THANK YOU! All the other "Divi image in lightbox" plugins I tried would not cause images from a Gutenberg-created gallery to open in a lightbox. I did not want to add another lightbox library, just wanted to use whatever Divi is using!
I purchase Divi Booster almost 5 years ago. Once again, you've came through for my Divi customization needs!
Glad it helped! :)
The manual jquery code is awesome. I added it to the theme options and it works like a dream! Thanks, much appreciated.
You’re welcome, Tina!
I cannot get this to work at all! it just links to the attachment page – any ideas?
Hey Bev, any chance you're able share a link to the page you're working on so that I can take a look? Thanks!
It seems like open images in lightbox was broken with this latest update. It had been working on a Divi blurb that linked to an image, but now it does not.
Hi Jeff, sorry I'm just getting to this. Are you able to share a link to an example page? I just tried on my test site and it's working with the latest Divi Booster and Divi 4. On possibility is that there's a JavaScript error on the page preventing the Divi Booster feature from running – but I should be able to tell you more if I can take a look. Thanks!
There does not seem to be an Open linked images in a lightbox option in divi booster any more? Or am I missing something?
Hey Veikko, it's still in there, but… a while ago I extended the feature to work on pages too (Divi Booster 2.8.7). Since it no longer made sense for it to be located in the "Posts" section of the Divi Booster settings, I moved it to:
Divi > Divi Booster > Site-wide Settings > Links > Open linked images in a lightbox
It seems I missed updating the location in this post, however, so my apologies about that. I've updated the post now. Thanks!
Hi, i've just purchased your plugin in order to get this feature. I have activated the lightbox option, deleted the cache but it doesn't work.
A line of text is linked to the image but when I'm clicking on the anchor, it opens the image on its own.
Thanks
Hey Christopher, is there any chance you're able to share a link to the page you're working on so that I can take a look at what's going on? Thanks!
Thanks! It worked!
Hi. Just purchased the Divi Booster. Is there a video on how to use it once the plugin is installed? Not sure what to do.
Thanks.
Hi Eugene, I don't have a video on how to use the plugin, I'm afraid. But once the plugin is installed, from your WordPress dashboard go to "Divi > Divi Booster". That will take you to the Divi Booster settings screen which contains most of the settings added by Divi Booster, organized by the section of Divi they act on. To enable a feature, simply check the box beside it, fill in any details it asks for, and save the settings using the button at the bottom of the settings page. To learn more about a particular feature, click the blue (i) icon beside it on the right hand side of the settings screen.
To enable the open image links in a light box feature, for example, go to the "Posts" section of the settings page, click the heading bar to expand the section if it isn't already and then check the box beside: "Open linked images in a lightbox". Save the settings and your links should now open in a lightbox.
I hope that helps, but let me know if you still aren't sure what to do. Thanks!
Nevermind. Must have been a cacheing issue, as it's now working.
Great! I'm glad you got it working, Michael.
The new Divi Booster option doesn't seem to work. It still just links to the image in a new window when the image is set to link to the Media File, rather than opening it in a lightbox.