DIVI: add lightbox to regular content images

divi-lightbox-snippet-for-functions.php

/* --- DEPRECATED --- */
/* add .et_pb_lightbox_image clss to content images */
add_filter('the_content', 'divi_add_lightbox');
function divi_add_lightbox($content) {
       global $post;
       $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
       $replacement = '<a$1href=$2$3.$4$5 class="et_pb_lightbox_image" title="'.$post->post_title.'"$6>';
       $content = preg_replace($pattern, $replacement, $content);
       return $content;
}

Works great - thanks.

Works great!

I'd suggest a change for anyone who may want to use this on galleries, or any other shortcode that generates images - put in a priority level for the "add_filter" function, as such:

add_filter('the_content', 'divi_add_lightbox', 99);

Very cool, thanks so much!

Is there a way that I can have the image caption in the title field, and not the post title?

Thanks in advance,
Chris

Ok, I found an issue with this. If you have an image which is linked to something other than an image, and they are both on the same line, it will add the lightbox class to the link, and when you click it, there will be a message saying the image couldn't be loaded (since the link is actually not to an image). e.g. a blurb's html outputs both image and link without a line break causing this headache.

The fix is simple - add an exclusion for any other tag opener before the image suffix thusly:

$pattern ="/<a(.*?)href=('|\")(.[^<]*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";

You'll see in the 3rd parenthetical reference I added:

[^<]

Seems to do the job without breaking anything.

@jfacemyer: Thanks for the fix! Is there any chance you know a solution to my question above?

It seems to throw errors, and not open the lightbox, if the lightbox was recently opened. E.g., if I click/open IMAGE1, and then close it. Then open IMAGE2. Then close that. IMAGE1 link won't open if I click on it.

It's adding this to the console:

Uncaught TypeError: Cannot read property 'top' of undefined at o._getOffset (jquery.magnific-popup.js?ver=3.0.62:26) at jquery.magnific-popup.js?ver=3.0.62:26

This works great for me, I've been using it on several websites with great success. However... there are a couple of things I would like to improve, but I don't have the necessary knowledge for that, so I tried a lot of Google search results with no success.
In the current form, the lightbox title of the image is the post/page title, so what I want to achieve is to make it display the image's title or alt text. Furthermore, it would be awesome to have all the lightbox-enabled images on a page as slides instead of be needed to close one to open another. I know that there are plugins that does pretty much the same thing, but usually also much more than that, and my goal is to keep it as simple as possible, with as few plugins as possible. It would be great to be able to have those simple things into functions.php and get everything sorted fast and simple. Thank you.

Works in latest divi stil, wondering why ET have not made this a default checkbox option for content images in the Divi Options panels ?

I was getting the same error as @Garconis. I was able to fix it by invoking Magnific Popup on the link directly (using jQuery), instead of adding the "et_pb_lightbox_image" class as above. Details here:

Open Image Links within Posts in a Lightbox

For those having problems with Uncaught TypeError: Cannot read property 'top' of undefined see the example code of a dirty hack:

<a class="et_pb_lightbox_image" href="{image_link}" target="_blank">{link_title}<img src="{image_link}" alt="" style="width: 0;"></a>

But what if link points to an image but doesn't have img tag inside?
For example <a href="image.jpg"> will be wrapped with lightbox too!

My variant is most robust and correct. It wraps with lightbox only img's which have href's to images:

add_filter('the_content', 'divi_add_lightbox');
function divi_add_lightbox($content) {
    global $post;
    $pattern ='#(<a.*href=".*\.(?:bmp|gif|jpeg|jpg|png)")(.*>.*<img.*>.*</a>)#i';
    $replacement = '$1 class="et_pb_lightbox_image" title="' . $post->post_title . '"$2';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

Thank you @EldarAgalarov - your snippet works on my Divi 3.9 development site.

@EldarAgalarov, your code doesn't seem to work on the current versions of Divi and WP gallery (they don't trigger the lightbox) while the original does. I couldn't tell why.

I used the Gutenberg gallery block (though I think the code output is the same as the classic gallery).

nice one :-)

It doesn't work anymore!