Breakdance – Lightbox with multiple galleries not working – Bug Fix

Breakdance has a known bug: when you use its gallery element with multiple galleries (or a single gallery with tabbed categories), the built-in lightbox stops working. Rather than waiting for a fix, here's how to replace it entirely with Lightgallery.js – a lightweight, feature-rich alternative that handles thumbnails, zoom, and proper image grouping out of the box. Plus, this is the library that Breakdance uses for its own lightbox functionality, so it's unknown why is this bug active for so long.

Working example is at the bottom of the post!

The Problem

Breakdance's gallery element supports tabbed filtering via categories. All images live inside a single container, and switching tabs toggles visibility with display: none. The built-in lightbox doesn't account for this properly – it simply doesn't display the lightbox at all.

The Solution

We replace Breakdance's lightbox with Lightgallery.js, using its dynamic mode. Instead of pointing the library at DOM elements and hoping it respects visibility states, we intercept image clicks, read the data-category attribute from the clicked image, build an array of only the images sharing that category, and open the lightbox with that filtered set.

This means the lightbox always shows exactly the right images – no bleeding between galleries. Plus, it has been created in such a way that it doesn't interfere with Breakdance default lightbox for single galleries - our solution is only applied for multiple (tabbed) galleries.

Setup

1. Load Lightgallery Assets

Add this to Code Block element's PHP code or, if you want to use this on multiple pages, add it inside a code snippets plugin:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'lightgallery',
        'https://cdn.jsdelivr.net/npm/lightgallery@2/css/lightgallery-bundle.min.css'
    );
    wp_enqueue_script(
        'lightgallery',
        'https://cdn.jsdelivr.net/npm/lightgallery@2/lightgallery.umd.js',
        [],
        null,
        true
    );
    wp_enqueue_script(
        'lg-thumbnail',
        'https://cdn.jsdelivr.net/npm/lightgallery@2/plugins/thumbnail/lg-thumbnail.umd.js',
        ['lightgallery'],
        null,
        true
    );
    wp_enqueue_script(
        'lg-zoom',
        'https://cdn.jsdelivr.net/npm/lightgallery@2/plugins/zoom/lg-zoom.umd.js',
        ['lightgallery'],
        null,
        true
    );
    wp_enqueue_script(
        'lg-fullscreen',
        'https://cdn.jsdelivr.net/npm/lightgallery@2/plugins/fullscreen/lg-fullscreen.umd.js',
        ['lightgallery'],
        null,
        true
    );
});

2. Enable Breakdance's Built-in Lightbox

In the Breakdance editor, select your gallery element and make sure the lightbox toggle is turned on in its settings panel (the "Link" option has to be set to "Lightbox"). We need the default lightbox functionality to create links for each image that we will then utilize do display them.

3. Add the Custom JavaScript

Add this to Code Block element's JS code or, if you want to use this on multiple pages, add it inside a code snippets plugin:

document.addEventListener('DOMContentLoaded', function() {
    var galleryContainer = document.querySelector('.ee-gallery--multiple');

    galleryContainer.addEventListener('click', function(e) {
        var clickedItem = e.target.closest('a.ee-gallery-item');
        if (!clickedItem) return;

        e.preventDefault();
        e.stopPropagation();

        // Get the active category from the clicked item
        var activeCategory = clickedItem.getAttribute('data-category');

        // Build slides from items in the same category
        var categoryItems = galleryContainer.querySelectorAll(
            'a.ee-gallery-item[data-category="' + activeCategory + '"]'
        );

        var slides = [];
        var startIndex = 0;

        categoryItems.forEach(function(item, i) {
            if (item === clickedItem) startIndex = i;

            slides.push({
                src: item.href,
                thumb: item.querySelector('img').src,
                subHtml: item.getAttribute('data-sub-html') || ''
            });
        });

        // Open lightbox with only this category's images
        var lg = lightGallery(document.createElement('div'), {
            dynamic: true,
            dynamicEl: slides,
            plugins: [lgThumbnail, lgZoom, lgFullscreen],
            index: startIndex,
            speed: 300,
            thumbnail: true,
            animateThumb: true,
            loop: true,
            download: false
        });

        lg.openGallery(startIndex);
    });
});

How It Works

The key insight is using Lightgallery's dynamic mode. Here's what happens when a user clicks an image:

1. The click handler reads the data-category attribute from the clicked image.
2. It queries the DOM for all images sharing that same category value.
3. It builds a clean array of slide objects (source URL, thumbnail, caption) from only those matching images.
4. It creates a fresh Lightgallery instance in dynamic mode with that array and opens it at the correct starting index.

Because we build the image set from scratch on every click, there's no stale state to worry about. Tab switching, filtering, reordering – none of it matters. The lightbox always reflects exactly what's in the active category at the moment of interaction.

Copy-paste Code Block

The complete Code Block element that you can simply copy-paste is available at Pastebin: https://pastebin.com/NW5keAxG