The Divi Theme's blog module gives you the option of displaying featured images for each of the posts. By default, these images link to the post to which they relate. If you'd prefer that the images open in a lightbox, you can use the following jQuery code:
<script>
jQuery(function($) {
$('.et_pb_blog_grid .entry-featured-image-url img').each(
function(){
var $this = $(this);
var src = $this.attr('src');
var src_full_size = src.replace(/-(\d+)x(\d+)\.([a-z]{3})$/i, ".$3");
var parent = $this.parent();
parent.attr('href', src_full_size);
parent.magnificPopup({type:'image'});
}
);
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
NB: that the code currently applies to the grid layout only.
The blog module uses a smaller version of the featured image, so the code above attempts to determine the URL of the original image.
Thank you!! I adapted this for a custom video blog post and had it open up a video link (generated by acf) instead of the thumbnail, and it worked like a dream. Super light weight and exactly what I needed, thanks for sharing!
You're welcome, Rachel! Thanks for taking the time to share that! I’m really glad the solution fit your custom video blog setup :)
Awesome, just what I was looking for – thanks!
You're welcome, Z3B!