Last time, when I worked on the Divi project I had a situation where I needed the blurb module image to be clickable and open in the lightbox.

I was researching and couldn’t find the proper plugin or the additional code that could easily resolve this issue so I end up creating a solution and share with you 🙂

What you need for this:

  1. Magnific Popup library
  2. Custom JS file called: divi-blurb-image-popup.js

Let’s start 🙂

1. Download Magnific Popup from the repository and extract it.

2. Using FTP manager (FileZilla) open your theme folder (child theme) and upload the Magnific Popup library (I prefer to create an assets folder in your theme so you have everything well organized, and upload Magnific Popup library there).

3. On your theme folder create a new file divi-blurb-image-popup.js (I prefer to create it and save it in assets/js folder because of better file organization).

4. Open the file divi-blurb-image-popup.js and paste this code:

jQuery(document).ready(function($){

    if ( $('.et_pb_blurb').length > 0 ) {
        $(".et_pb_blurb").each(function(i, e){
            var img_src = $(this).find(".et_pb_image_wrap").children("img").attr("src");
            var img = $(this).find(".et_pb_image_wrap").html();
            var new_elem = $('<a href="'+img_src+'">'+img+'</a>');

            $(this).find(".et_pb_image_wrap").html(new_elem);
        });

        $(".et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap").magnificPopup({
            delegate: 'a',
            type: 'image',        
            closeOnContentClick: true,
            closeBtnInside: false,
            mainClass: 'mfp-no-margins mfp-with-zoom',
            gallery:{
              enabled:false
            },
            zoom: {
                enabled: true,
                duration: 200
            }
        });
    }
    
});

5. Save it and upload it to your theme folder (assets/js/divi-blurb-image-popup.js).

Now it’s time to call Magnific Popup library and divi-blurb-image-popup.js file

6. Open your file functions.php and paste this code:

function cs_magnific_scripts() {
    // Call Magnific Popup
    wp_enqueue_style( 'magnific-popup-css', get_stylesheet_directory_uri() . '/assets/magnific/magnific-popup.css' );
    wp_enqueue_script('magnific-js', get_stylesheet_directory_uri() . '/assets/magnific/jquery.magnific-popup.js', array("jquery") );
    wp_enqueue_script('magnific-js-2', get_stylesheet_directory_uri() . '/assets/magnific/jquery.magnific-popup.min.js', array("jquery"));

    // Call divi-blurb-image-popup.js file
    wp_enqueue_script('divi-blurb-image-popup', get_stylesheet_directory_uri() . '/assets/js/divi-blurb-image-popup.js', array("jquery") );
}
add_action( 'wp_enqueue_scripts', 'cs_magnific_scripts' );

Please note that you have to replace the path from the code above with your real path.

e.g. get_stylesheet_directory_uri() . ‘/assets/magnific/magnific-popup.css’ instead of this you will use your path where you saved Magnific Popup library on your theme. In my case, I choose to save it in the assets folder.

That’s it 🙂

If you have any questions, feel free to ask in the comments.