We’ll manually load a lightbox script that ensures the Blurb Module images open in a lightbox.
Step 1: Add a Custom CSS Class to the Blurb Module
- Edit the Blurb Module
- Open the module settings.
- Go to the Advanced tab.
- In the CSS Class field, enter:
blurb-lightbox - Save changes.
Step 2: Add the Magnific Popup Script
We need to load the lightbox script and apply it to the blurb images.
- Go to Divi > Theme Options > Integration.
- In the “Add code to the
<head>of your blog” section, insert this:
<!-- Load Magnific Popup -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
- In the “Add code to the
<body>“ section, insert this:
<script>
jQuery(document).ready(function($) {
$(".blurb-lightbox .et_pb_main_blurb_image img").each(function() {
var imgSrc = $(this).attr("src");
$(this).wrap('<a href="' + imgSrc + '" class="blurb-popup"></a>');
});
$(".blurb-popup").magnificPopup({
type: "image",
gallery: { enabled: true },
closeOnContentClick: true
});
});
</script>
Step 3: Clear Cache & Test
- If you have caching plugins enabled, clear your cache.
- Refresh your page and click the blurb image.
- The image should now open in a lightbox with a close button and navigation.
Step 4: Increase the Lightbox Overlay z-index
Add this CSS to Divi > Theme Options > Custom CSS OR inside a Code Module on your page:
.mfp-bg, .mfp-wrap {
z-index: 999999 !important; /* Ensures the lightbox is on top */
}
.mfp-container {
z-index: 1000000 !important;
}
Awesome, thank you! I’ve been searching for this FOREVER. Appreciate your post!
You’re welcome, glad I could help! 🙌