-
-
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; | |
} |
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!
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