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.
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.
Finally, add this code in a html element on the same page as is the gallery
<style>
.captionlightbox {
color: white;
position: absolute;
bottom: 3%;
font-size: 29px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.elementor-gallery__container').addEventListener('click', function(e){
setTimeout(function(){
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');
duplicate[0].appendChild(cloneforduplicate);
duplicate[1].appendChild(cloneforotherduplicate);
var captionsDupClass = document.querySelectorAll('.swiper-slide-duplicate > .elementor-gallery-item__description');
captionsDupClass[0].classList.add('captionlightbox');
captionsDupClass[1].classList.add('captionlightbox');
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');
captionsClass[i].classList.add('captionlightbox');
};
for (var i = 0; i < captions.length; i++) {
_loope(i);
}
}, 300);
});
});
</script>
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.
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!
Thanks! and thanks for the info!
Thanks a ton for this!!
Thank you!!
Works perfectly. Can't thank you enough for sharing this!
Thanks,
if i want to dispaly Title + Descrition how can i do that?
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.
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!