-
-
Save CoachBirgit/b0bed7679b9965a4ca51 to your computer and use it in GitHub Desktop.
/* --- 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 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:
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!
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.