Divi Lightbox Not Working in Divi 5? Every Fix + How to Set It Up Correctly

Why the Divi Lightbox Breaks in Divi 5 (The Real Reason)

If you upgraded from Divi 4 to Divi 5 and your gallery divi lightbox simply stopped opening, clicks do nothing, the overlay never appears, you are not alone. This is one of the most-searched Divi 5 problems in 2026, and the cause is architectural rather than a bug you did something wrong.

Divi 4 relied on Magnific Popup, a jQuery-based lightbox library that shipped with every Elegant Themes product. When Elegant Themes rebuilt Divi 5 from scratch in React, jQuery was removed from the critical-path scripts, and Magnific Popup went with it. Any Divi 4 gallery module or image module that was configured to "open in lightbox" quietly lost its lightbox because the underlying library is no longer loaded.

This affects:

• The legacy Divi Gallery module migrated from Divi 4
• Individual Image modules with lightbox enabled
• Any third-party Divi 4 gallery plugins that depended on MagnificPopup being available globally

The Three Root Causes (Diagnose Yours First)

Before you start clicking through settings, take sixty seconds to identify which of these three situations you are in. The right fix depends entirely on the cause.

Cause 1: You Migrated a Divi 4 Gallery to Divi 5

Divi's migration tool carries your module settings forward, but it cannot create a lightbox library that no longer exists. If your gallery was built in Divi 4 and you migrated it, the lightbox setting is still "on" in the database — but there is nothing to execute it on the front end.

Cause 2: Divi 5 Gallery Module — Lightbox Setting Not Enabled

The Divi 5 native gallery module does have some lightbox functionality, but it must be explicitly enabled in the module settings. Many users assume it is on by default.

Cause 3: A Plugin or Theme Conflict Is Blocking the Script

Caching plugins (WP Rocket, W3 Total Cache, LiteSpeed Cache), minification settings, or another gallery plugin can strip, defer, or conflict with whatever lightbox script is meant to load.

Fix 1: Re-Enable Lightbox in the Divi 5 Native Gallery Module

This is the first thing to check if you are using the native Divi 5 Gallery module — not a migrated Divi 4 module.

Fix 2: Force-Load the Legacy Magnific Popup Scripts (Temporary Workaround)

This workaround re-injects jQuery and Magnific Popup into every page so migrated Divi 4 galleries work again. It is the quickest fix if you have dozens of pages built with Divi 4 gallery modules that you cannot rebuild right now.

How to do it

Add the following to your child theme's functions.php or via a code snippet plugin:

add_action( 'wp_enqueue_scripts', function() {
    // Only load on pages that need the gallery lightbox
    if ( is_page() || is_single() ) {
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script(
            'magnific-popup',
            'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js',
            [ 'jquery' ],
            '1.1.0',
            true
        );
        wp_enqueue_style(
            'magnific-popup-css',
            'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css',
            [],
            '1.1.0'
        );
    }
} );

Fix 3: Check Plugin and Caching Conflicts

This step resolves the majority of "it used to work, now it doesn't" lightbox problems that are not directly caused by the Divi 4 → 5 migration.

Step 3a: Disable Script Optimization and Minification

In WP Rocket, LiteSpeed Cache, or W3 Total Cache, look for:

• Combine JS files — disable this.
• Defer JavaScript execution — disable or add exceptions for Divi and lightbox scripts.
• Minify JavaScript — try disabling to test.

In Divi itself: Divi → Theme Options → General → Performance — check whether "Defer Third-Party Scripts" or "Critical CSS" settings are interfering.

Step 3b: Deactivate Plugins One at a Time

Use the standard "binary search" approach: deactivate half your plugins, test, narrow down to the conflicting one. Plugins most commonly responsible for Divi lightbox conflicts include:

• Autoptimize
• Hummingbird (when JS optimization is on)
• Flying Scripts
• Asset CleanUp Pro (when jQuery is excluded from certain pages)

Step 3c: Test with the Default WordPress Theme

Temporarily switch to Twenty Twenty-Four to rule out a child theme conflict. If the lightbox works with the default theme, a customization in your child theme's functions.php or CSS is stripping the scripts.

Fix 4: Use a Gallery Module With Its Own Built-In Lightbox

This is the correct long-term fix — and the one that gives you the most features.

The reason the Divi 4 lightbox is fragile is that it depended on a globally-shared jQuery plugin. Any update, plugin conflict, or performance optimization could break it. The modern, Divi 5-native approach is to use a gallery module that ships its own self-contained lightbox — one that does not depend on jQuery, Magnific Popup, or any other globally-loaded library.

HappyDivi Gallery takes exactly this approach. The built-in lightbox is a zero-dependency overlay written in vanilla JavaScript. It only downloads when a visitor actually clicks an image (code-split, on demand), and it works reliably regardless of what other plugins are active on your site.

Here is what the HappyDivi Gallery built-in lightbox includes — features that go well beyond what Divi 4's Magnific Popup offered:

How to Set Up the HappyDivi Gallery Lightbox — Step by Step

If you decide to move to HappyDivi Gallery (the recommended path for any Divi 5 site), here is exactly how to configure the lightbox.

Step 1: Install and Activate HappyDivi Gallery

Purchase and download HappyDivi Gallery from happydivi.com/gallery. Install it as a standard WordPress plugin (Plugins → Add New → Upload Plugin). Activate it. No additional configuration is needed — the plugin registers itself with Divi 5 automatically on activation.

Step 2: Add the HappyDivi Gallery Module to Your Page

Open the page in the Divi 5 Visual Builder. Click the blue + button to add a new module. Search for "HappyDivi" — the HappyDivi Gallery module appears in the module list. Insert it.

Step 3: Choose Your Content Source

In the Content tab → Image / Content Source group, choose where the gallery pulls its images from:

• Media Library — hand-pick photos you have uploaded.
• Posts / Pages — auto-pulls featured images from any post or page.
• Custom Post Type — point at any registered CPT.
• WooCommerce Products — product images with shopping features.
• ACF Image / Gallery Field — images from Advanced Custom Fields.

For a basic portfolio or photo gallery replacing a broken Divi 4 gallery, choose Media Library and select your images.

Step 4: Enable the Lightbox

In the Content tab → Click Action group, set Click Action to Open in Lightbox. The lightbox toolbar options appear below. Decide which buttons to show:

• Thumbnails (filmstrip at bottom) — recommended for photo galleries.
• Info Panel — shows EXIF data for photos; great for photography portfolios.
• Zoom — allows in-lightbox zoom; recommended.
• Download — lets visitors download the full image.
• Fullscreen — enters browser fullscreen.
• Share — native share sheet on mobile, clipboard copy on desktop.

Step 5: Choose Your Gallery Layout

In the Content tab → Gallery Layout group:

• Grid — clean uniform cells, best for product galleries or portfolios where consistency matters.
• Masonry — Pinterest-style variable heights, best for photography where you do not want images cropped.
• Justified — Flickr-style flush rows, best for photo sets where you want every image to touch its neighbour edge-to-edge.

Step 6: Configure Lazy Loading

In the Content tab → Lazy Loading group, choose a placeholder mode:

• Blur-up (default) — low-res blur fades to sharp as each image loads. The most polished option.
• Skeleton shimmer — a pulsing grey shape holds the space while the image loads. More app-like.
• None — image appears when fully loaded, no placeholder.

Step 7: Save and Test

Click Save in the Visual Builder. Open the page in a fresh incognito window. Click any image. The lightbox should open immediately, with arrows, keyboard navigation, and all your chosen toolbar buttons. Test on mobile: swipe left/right to navigate, swipe down to close.

The Divi 5 Lightbox Settings You Might Have Missed

Whether you are using the native Divi 5 gallery or HappyDivi Gallery, here are the settings that are most often overlooked.

Thumbnail Filmstrip

The filmstrip (a scrollable row of small thumbnails at the bottom of the lightbox) makes it easy for visitors to jump to any image in a large gallery without clicking through one by one. In HappyDivi Gallery, it is toggled under Click Action → Lightbox → Thumbnails.

Info Panel for Photography and WooCommerce

For photography galleries, the Info Panel shows real EXIF metadata — camera model, aperture, ISO, shutter speed — pulled directly from the image file's embedded data. For WooCommerce galleries, the Info Panel shows product price and an Add to Cart button, so visitors can shop without leaving the lightbox. This is configured under Click Action → Lightbox → Info Panel.

Share Button Behavior

On desktop, the Share button copies the direct image URL to the clipboard and shows a brief "Copied!" toast. On mobile, it triggers the native OS share sheet (the same one you get when sharing from apps). If you are building a public photography site and want images to be shareable, turn this on. If you are building a private client gallery or a B2B portfolio, turn it off.

Fullscreen API

The Fullscreen button uses the browser's native Fullscreen API — the same mechanism used by YouTube and Netflix. The image expands to cover the entire monitor with true fullscreen (not just a maximised browser window). This is particularly impactful for landscape photography and architectural work.

prefers-reduced-motion

All HappyDivi Gallery lightbox transitions — the open animation, the image-change crossfade, the toolbar fade-ins — are automatically disabled for any visitor whose operating system has "Reduce Motion" enabled. This is common among users with vestibular disorders or motion sensitivity. There is no setting to configure; it works automatically.

Common Divi Lightbox Problems and Their Exact Solutions

Here are the most-reported Divi lightbox issues on forums and their confirmed fixes.

"The lightbox opens but shows a broken image / 404"

Cause: The image URL being passed to the lightbox is wrong — often a relative path that becomes invalid in a subdirectory install, or a URL that points to a thumbnail size rather than the full image.

Fix: In HappyDivi Gallery → Content tab → Gallery Layout → Image Size, set this to Large or Full Size. Serving thumbnails to the lightbox is a common misconfiguration — thumbnails are meant for the grid cells, not for the full-size view.

"The lightbox works on desktop but clicking images on mobile does nothing"

Cause: A CSS rule is absorbing the click event before the JavaScript can intercept it. Often caused by a theme's global pointer-events: none on certain elements, or a touch event handler in another plugin that calls event.stopPropagation().

Fix in HappyDivi Gallery: This does not occur because HappyDivi Gallery uses its own isolated event listeners on its own DOM elements. If you are experiencing this with the native Divi gallery, inspect the element in mobile DevTools and look for any style or script overriding the click target.

"The lightbox opens but the arrows are missing"

Cause: Missing CSS. Either the lightbox stylesheet was not loaded (caching issue) or a plugin's CSS override is hiding the arrow elements.

Fix: Clear all caches including the browser cache. Check for CSS rules targeting .mfp-arrow (Magnific Popup) or your gallery's arrow classes. In HappyDivi Gallery, the lightbox CSS is self-contained and loaded on-demand; if arrows are missing it typically means the CSS file was not served — check your hosting's file permissions or a CDN origin issue.

"The lightbox opens but is completely unstyled — no backdrop, white background"

Cause: The lightbox CSS file failed to load, most commonly because a minification tool corrupted the file or an aggressive caching plugin cached a version from before the plugin was activated.

Fix: Deactivate all caching and minification plugins, clear all caches, then retest. If it works, re-enable caching one feature at a time until you find the conflicting optimisation rule.

"The lightbox worked, then broke after a Divi update"

Cause: Divi updates occasionally change how modules register their scripts and styles. A new Divi 5 version may have removed a compatibility shim that was keeping your old lightbox working.

"I want the lightbox to show images from a WooCommerce product gallery, not just the featured image"

Cause: The native Divi gallery module has no WooCommerce integration — it can only display images you manually pick from the Media Library.

Fix: This is where HappyDivi Gallery's WooCommerce Products source and Product Carousel settings become essential. With source set to WooCommerce Products and the Product Carousel enabled, each gallery cell shows a mini slideshow of all product images. When clicked, the lightbox displays the full-resolution version of whichever slide is currently showing. The Info Panel inside the lightbox shows the product price and an Add to Cart button.

Understanding the HappyDivi Gallery Lightbox Architecture

For technically curious readers — web developers and agency leads who want to understand why HappyDivi Gallery's lightbox is more reliable than Magnific Popup — here is a brief explanation.

Magnific Popup is a jQuery plugin, meaning it requires jQuery to be loaded globally before it runs, attaches click handlers by querying the entire DOM with $('.mfp-gallery'), and shares a single global namespace that any other script can accidentally overwrite.

HappyDivi Gallery's lightbox is architected differently across four key points:

This architecture is why HappyDivi Gallery's lightbox does not break when you add a new plugin, update Divi, or enable aggressive caching.

When to Use Each Fix: A Decision Tree

Is your gallery a migrated Divi 4 gallery?
  ├── Yes → Is rebuilding it an option right now?
  │         ├── Yes → Use HappyDivi Gallery (Fix 4) — best outcome
  │         └── No  → Use Fix 2 (force-load jQuery) as a bridge, plan Fix 4 soon
  └── No → Is it the native Divi 5 Gallery module?
            ├── Yes → Is the lightbox toggle actually enabled? (Fix 1)
            │         └── Yes, it is → Is there a plugin conflict? (Fix 3)
            └── No  → What gallery plugin are you using?
                       └── Check that plugin's own lightbox documentation

If you are building a new page from scratch — no migration involved — the answer is straightforward: use HappyDivi Gallery from the start. You get a modern, reliable, feature-rich lightbox that requires no workarounds and is designed specifically for Divi 5's React-based architecture.

HappyDivi Gallery: The Guaranteed-Works Lightbox for Divi 5

HappyDivi Gallery is a premium gallery module for Divi 5 that adds five dynamic content sources (Media Library, Posts, Custom Post Types, ACF fields, and WooCommerce Products), three layout engines (Grid, Masonry, and Justified), a zero-dependency built-in lightbox, an animated filter bar, and three pagination modes — all from a single module inside the Visual Builder, with no shortcodes and zero jQuery.

The built-in lightbox covers every scenario:

• Photography portfolio — Justified layout + lightbox with EXIF panel + pinch zoom + download button.
• WooCommerce shop — product images with per-cell carousel + lightbox showing price and Add to Cart.
• Client gallery — lightbox with download enabled, share disabled, info panel off.
• Blog post grid — Masonry layout, click action set to "Go to Post URL" instead of lightbox for SEO-friendly navigation.

Related Reading

• The Complete Divi 5 Gallery Guide: Dynamic Sources, Layouts, Lightbox, Filters & Pagination (2026) — the full reference covering every HappyDivi Gallery feature.
• 10 Things Divi's Default Gallery Module Cannot Do (And the Exact Fix for Each) — a detailed comparison of the native Divi gallery versus HappyDivi Gallery.
• HappyDivi Gallery Plugin Review: Real Divi 5 Tests, Real Screenshots, Honest Verdict — independent real-world testing with Lighthouse scores and setup walkthroughs.

Frequently Asked Questions