Divi image gallery lightbox

The Divi theme is a popular WordPress theme that includes a built-in image gallery module. By default, when you click on an image in the gallery, it opens in a lightbox overlay. However, if you want to customize the behavior of the lightbox or add additional functionality, you can use the following code snippet.

function wpsnippets_custom_divi_lightbox() {
    wp_enqueue_script( 'wpsnippets-custom-divi-lightbox', get_stylesheet_directory_uri() . '/js/custom-divi-lightbox.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_custom_divi_lightbox' );

This code snippet adds a custom JavaScript file called custom-divi-lightbox.js to your theme’s JavaScript files. You’ll need to create this file and place it in the /js/ directory of your theme. In this file, you can write your own JavaScript code to customize the behavior of the Divi lightbox.

For example, you could use this code snippet to add additional functionality to the lightbox, such as displaying a caption or a description for each image, or adding navigation arrows to scroll through the gallery. You can also use it to modify the appearance of the lightbox, such as changing the background color or adding a custom close button.

Remember to replace 'wpsnippets-custom-divi-lightbox' with a unique name for your custom script, and adjust the file path and version number as needed.

Note: This code snippet assumes that you are using a child theme of Divi. If you are using the parent theme, you may need to modify the file path to match the location of your theme’s JavaScript files.

Examples

Example 1: Adding a Lightbox to the Divi Image Gallery

This example demonstrates how to add a lightbox functionality to the Divi image gallery. The lightbox allows users to view larger versions of the images in a popup window when clicked.

function wpsnippets_add_lightbox_to_divi_gallery() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'magnific-popup', get_stylesheet_directory_uri() . '/js/jquery.magnific-popup.min.js', array( 'jquery' ), '1.1.0', true );
    wp_enqueue_style( 'magnific-popup', get_stylesheet_directory_uri() . '/css/magnific-popup.css', array(), '1.1.0' );
    wp_add_inline_script( 'magnific-popup', "
        jQuery(document).ready(function($) {
            $('.et_pb_gallery_image a').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                }
            });
        });
    " );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_add_lightbox_to_divi_gallery' );

This code adds the necessary JavaScript and CSS files for the Magnific Popup library, which provides the lightbox functionality. It then initializes the lightbox on the Divi image gallery by targeting the .et_pb_gallery_image a selector and enabling the gallery mode.

Example 2: Customizing the Lightbox Options

This example shows how to customize the options of the lightbox, such as the animation effect, navigation arrows, and close button.

function wpsnippets_customize_lightbox_options() {
    wp_add_inline_script( 'magnific-popup', "
        jQuery(document).ready(function($) {
            $('.et_pb_gallery_image a').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                },
                mainClass: 'mfp-fade',
                removalDelay: 300,
                closeBtnInside: true,
                showCloseBtn: true,
                navigateByImgClick: true,
                arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
                tPrev: 'Previous',
                tNext: 'Next',
                tCounter: '%curr% of %total%'
            });
        });
    " );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_customize_lightbox_options' );

In this code, we use the mainClass option to add a fade animation effect to the lightbox. The removalDelay option sets the delay before the lightbox is removed. The closeBtnInside and showCloseBtn options control the display of the close button. The navigateByImgClick option enables navigation to the next/previous image by clicking on the current image. The arrowMarkup option customizes the HTML markup for the navigation arrows, and the tPrev, tNext, and tCounter options customize the text displayed for the previous, next, and counter elements.

Example 3: Opening Lightbox on Page Load

This example demonstrates how to automatically open the lightbox on page load, displaying the first image in the gallery.

function wpsnippets_open_lightbox_on_page_load() {
    wp_add_inline_script( 'magnific-popup', "
        jQuery(document).ready(function($) {
            $('.et_pb_gallery_image a').first().magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                },
                mainClass: 'mfp-fade',
                removalDelay: 300,
                closeBtnInside: true,
                showCloseBtn: true,
                navigateByImgClick: true,
                arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
                tPrev: 'Previous',
                tNext: 'Next',
                tCounter: '%curr% of %total%',
                callbacks: {
                    open: function() {
                        this.goTo(0);
                    }
                }
            }).magnificPopup('open');
        });
    " );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_open_lightbox_on_page_load' );

This code modifies the previous example by adding a callbacks option to the lightbox initialization. The open callback is used to automatically navigate to the first image in the gallery when the lightbox is opened. The magnificPopup('open') method is then called to open the lightbox on page load.