Breakdance uses the LightGallery JS library for its lightbox features, so all dependencies are already included.
The following code shows how to open a Lightbox gallery with thumbnails when you click on a single image.
Step 1
Use the Supa Code Block element from the Assets4Breakdance plugin (it's free, don't worry).
Add your image as a child of that element:
Step 2
In the Options, select LightGallery as a dependency, so we know it's going to load the library is it's not already loaded.
Step 3
Paste the JavaScript code and CSS code into the Supa Code Block.
Then replace the gallery URL with own image URLs.
const galleryItems = [
{
src: '/wp-content/uploads/2025/10/cool-image.png',
thumb: '/wp-content/uploads/2025/10/cool-image-150x150.png',
subHtml: '<h4>my cool image</h4>',
alt: 'my cool image'
},
{
src: '/wp-content/uploads/2025/10/cool-photo.png',
thumb: '/wp-content/uploads/2025/10/cool-photo-150x150.png',
subHtml: '<h4>my cool photo</h4>',
alt: 'my cool photo'
},
{
src: '/wp-content/uploads/2025/10/cool-illustration.png',
thumb: '/wp-content/uploads/2025/10/cool-illustration-150x150.png',
subHtml: '<h4>my cool illustration</h4>',
alt: 'my cool illustration'
}
];
document.querySelector('%%SELECTOR%% img').addEventListener('click', function (event) {
const dynamicGallery = lightGallery(document.body, {
dynamic: true,
dynamicEl: galleryItems,
thumbnail: true,
plugins: [lgThumbnail, lgZoom],
animateThumb: true,
allowMediaOverlap: true,
controls: true,
download: false, // enable download if needed
});
dynamicGallery.openGallery();
});
cursor: pointer
}
.lg-media-overlap .lg-sub-html {
background-image: unset
}
.lg-sub-html h4 {
display: inline;
background-color: var(--bde-brand-primary-color);
padding: 5px 10px;
border-radius: 8px;
color: black
}
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover {
border-color: var(--bde-brand-primary-color)
}
Supa Tip
Since we are using the Supa Code Block, we can create a more sementic structure, using the figure and figcaption tags. Don't forget to select the figcaption tag for your text element (in the Advanced panel).
