Breakdance includes an integrated LightGallery.js lightbox feature, that works with Wrapper Links and Galleries.
What if your posts are created in Gutenberg or the Classic Editor?
Follow this quick tutorial to trigger the same lightbox , by using the same library.
The Gutenberg Method
Link any image or gallery block to its Media File and the rest is handled in your Single Posts template:
In your Single Post template, add the Post Content element and assign the ID myPostContent.
Add the Supa Code Block element and enable LightGallery under Dependencies.
Note that the Supa Code Block element only loads required scripts once—no double requests if another element already pulled them. That's why I recommend using it.
In the JavaScript panel of the Supa Code Block, paste the snippet shown in the field below.
document.querySelectorAll('#myPostContent .wp-block-gallery').forEach(gallery => {
lightGallery(gallery, {
plugins: [lgZoom, lgThumbnail],
speed: 500,
selector: 'a',
});
});
/* for Gutenberg single images */
document.querySelectorAll('#myPostContent .wp-block-image:not(.wp-block-gallery > .wp-block-image)').forEach(singleImage => {
lightGallery(singleImage, {
plugins: [lgZoom],
speed: 500,
selector: 'a'
});
});
The Classic Editor Method
Follow the same steps as the Gutenberg method: link each image to its Media file first.
Since there's no built-in gallery in the Classic Editor, the only task left is handling the images.
Insert the following snippet into the Supa Code Block; every image will be grouped in a tidy, thumbnail-based gallery.
plugins: [lgZoom, lgThumbnail],
speed: 500,
selector: 'a:has(img)',
});
