Elementor Lightbox Caption: Easily Display Captions in the Lightbox

Elementor Lightbox Captions! Easily Add Captions to The Lightbox

No extra plug-ins required! Elementor Pro Required.

Important: The tutorial below isn’t needed anymore, as Elementor introduced this feature directly. See #6 here. However, if you need to be able to add links, or more styling options or different content in the captions, message me.

Here is how to easily add captions to the default Elementor Lightbox, when using the new gallery element. Works for only one gallery element per page, but it works for Multiple galleries options within that element. As seen in the working example below.

Special thanks to Matt Stern, from Stern Design Co , who got me to work on this project for his client’s website. You can see the results at https://juliannekelleyart.com/macarons/, although it is still under construction.

Working examples:

To begin with, create your gallery using the Elementor Pro gallery element

The Elementor lightbox captions will only work with this element. Get Elementor Pro here.

Elementor Lightbox Caption: Easily Display Captions in the Lightbox

Then, you will need to set something as the description under 'Overlay'. This will be the caption in the Elementor lightbox

If you don’t want the text to show up while NOT in the lightbox, you can set the opacity to 0 in the styling options.

The ‘Title’ is optional, and it will not show up in the lightbox.

Elementor Lightbox Caption: Easily Display Captions in the Lightbox
Description needs to be set. Any option other than 'none' will work.

Finally, add this code in a html element on the same page as is the gallery

Elementor Close PopUp on Click for Menu & Same Page Links
left element
.captionlightbox {
color: white;
position: absolute;
bottom: 3%;
font-size: 29px;
document.addEventListener('DOMContentLoaded', function() {

document.querySelector('.elementor-gallery__container').addEventListener('click', function(e){
var captions = document.querySelectorAll('.e-gallery-item:not(.e-gallery-item-hidden) > div.elementor-gallery-item__content > div.elementor-gallery-item__description');
var lightboxcaptions = document.querySelectorAll('.swiper-zoom-container');

var lastcaption = captions[captions.length- 1];
var cloneforduplicate = lastcaption.cloneNode(true);
var cloneforotherduplicate = captions[0].cloneNode(true);
var duplicate = document.querySelectorAll('.swiper-slide-duplicate');

var captionsDupClass = document.querySelectorAll('.swiper-slide-duplicate > .elementor-gallery-item__description');

var _loope = function _loope(i) {
var clone = captions[i].cloneNode(true);
lightboxcaptions[i+ 1].appendChild(clone);
var captionsClass = document.querySelectorAll('.swiper-zoom-container > .elementor-gallery-item__description');

for (var i = 0; i < captions.length; i++) {
}, 300);



You can change the styling of the Elementor lightbox caption by modifying the CSS at the beginning of the code.

If you need to be able to add links and more styling in the captions, message me.

Et voila! Thanks for reading!
Let me know if you need help!

8 Responses

  1. Maan! You saved me, thank you so much!
    I have a little tip to not leave the caption field completely void in any of the images or this method will lead to show the captions in the wrong images (it's enough to leave a "space" charachter to fill the caption).
    Thank you again!

  2. Hi, i have a problem. If i write some html in my picture description, it won't display in the lightbox. Do you have a code that the lightbox display the html code correctly? Thank you very much.

  3. Thanks for this code - works great! Is there a way to make this script run on multiple galleries on a page? It seems to work only on the first gallery. Thanks again!

Leave a Reply