Open Divi Image Links in a Lightbox

|

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>
As of Divi 4.10, the Magnific Popup library used to display the lightboxes is no longer loaded by default, and must be explicitly loaded as needed. You can do so by adding this PHP code to your site:
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);
}

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.js

Enabling 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.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

38 Comments

  1. First, thanks for your work!
    I have been using php code and jQery up to now, and it worked perfect. But now lightbox doesn't works. Maybe the problem is some update of Divi or WordPress… I don't know.

    Does Divi Booster plugin have the same code like this? Or is it different?

    Reply
    • You're very welcome, Ana! If you haven't already, you'd need to add the second block of code in the post to ensure compatibility with Divi 4.10 upwards. If that doesn't help, is there any chance you're able to send through a link to to an example page showing the problem, so that I can take a look for you?

      Divi Booster is adding essentially the same code. It does include some additional code to enable lightboxes on map module images – nothing that should make a difference on other images though.

      Reply
      • Yes, i have added the php code and the script in the integration options of Divi. Both.
        It goes crazy, because sometimes works in Chrome desktop, but doesn't work in deskotp of other browser like Opera and phone Chrome . Other times doesn't work in Chrome desktop, but works in phone… Now it doesn't work on the phone (i try in Opera and Chrome) and desktop i tried last night in Chrome (only works in some post) and Opera browser doesn't work… 😅
        I send you some link:
        https://expedienteviajero.com/espana/castilla-la-mancha/ruta-ciudad-encantada/

        Reply
        • Hey Ana, thanks for the link. You seem to have added the code correctly, and on my test sites the code works correctly in the various browsers. However, I can see on your site that WP Rocket is attempting to delay loading of both pieces of code. I think that this is causing a condition where sometimes the necessary code hasn't yet been loaded and the lightbox functionality doesn't work. At other times the code loads fast enough to be available at the right time. This would explain the unpredictability of the lightboxes.

          Can I suggest disabling WP Rocket temporarily and testing to see if that gets the lightboxes working? If it does, then you should be able to solve the issue by adding the following exclusions in WP Rocket:

          /feature/dynamic-assets/assets/css/magnific_popup.css
          /feature/dynamic-assets/assets/js/magnific-popup.js

          Hopefully that will do the trick, but if you're still having trouble with it after that, let me know. Thanks!

          Reply
          • Thanks for the interest Dan!
            You were right, i dissabled wp rocket and lightbox works well again.
            But i added that exclusions in Wp Rocket and don't work 😢

          • Hi Ana, I've done some testing with WP Rocket and I think you also need to add an exclusion for the JavaScript code given in the post. To do so, first update the JavaScript code to the current version shown in the post above (I've updated only the opening "script" tag in the first line). Then add the exclusions as given in the new WP Rocket compatibility setting at the end of the post.

            I hope it helps, but let me know if you have any further trouble with it. Thanks!

  2. Hi! and thanks for that information! It works again well, but i have a problem: the lightbox works in desktop, but doesn´t work in mobile. Are there some code to add for this?
    Thanks

    Reply
    • Hey Dani, any chance you're able to share a link to the page you're working on so that I can take a look for you? Thanks!

      Reply
  3. Hello Dan (and everyone else),

    I was really (REALLY!) happy with the jQuery-snippet you supplied, after searching for a solution for hours. But I just found out that the Lightbox-functionality isn't working anymore. Even when I disable Defer jQuery etc. Is there a way to make it work again? I tried using the code with 'Code Snippets'-plugin (hoping to bypass Divi), but it still doesn't work… Any help is much appreciated!

    Reply
    • Hey Peter! The issue is, I think, that the Magnific Popup library that this jQuery relies on is no longer loaded by default in Divi. As such, we now need to load it ourselves. I've added the code to do this. Note that it is PHP code, rather than jQuery. This PHP can be added using the Code Snippets plugin (or in a child theme functions.php file, etc). I hope it helps, but give me a shout if you have any trouble with it. Thanks!

      Side note for anyone using Divi Booster: the plugin has already been updated to load Magnific Popup as needed, so there's no need to add the PHP code in that case.

      Reply
  4. So I've been playing with this to figure out what I can do to get the lightbox feature to come back. I turned off Divibooster, learned to add in the jquery code above, and lightbox still didn't work.

    What did work is a weird way to get it working. I added in a new row at the bottom then added in an "image module". I made sure not to keep an actual image in it, but in content>Link, I said "yes" to "Open in Lightbox".

    That's what got it working for me again. I wonder if using the Divi Image Hover plugin messed with the divibooster plugin since the only thing I had updated was Divi Image Hover (It's what I use for my portfolio designs).

    If someone is able to look through my website to see what I'm doing wrong I would appreciate it.
    ruemojica(.)com.

    Reply
    • Hey Rue, sorry you've been having this issue, and thanks for the details of your workaround. I don't think this is related to Divi Image Hover, rather it's a result of the recent Divi performance updates (I've been able to reproduce it without DIH installed). The Divi Booster feature relies on a JavaScript library that used to be loaded by Divi by default, but now is only loaded when Divi perceives it to be needed (e.g. when an image with "Open in Lightbox" is added to the page – which is why your workaround with the empty image module works). I'll update Divi Booster as soon as possible to ensure the library is loaded correctly for the "Open linked images in a lightbox" feature is enabled and will update here once I've done so. Apologies for the hassle, and thanks again!

      Reply
      • Hey Rue, I've just released Divi Booster v3.6.1 which should fix the issue. I hope it helps, but let me know if not. Thanks!

        Reply
        • Thanks Dan! I'll update my plugins soon and test it out. I'll get back to you after!

          Reply
          • Thanks Rue :)

  5. Today, I updated my plugins and my lightbox feature stopped working. I tried disabling then enabling the plugin and going into the divi booster settings to turn off the setting and turn it back on, but nothing is working. Any help would be appreciated. Thanks.

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.