Add HTML To The Elementor Lightbox Captions (Links, Bold)
First, let’s add an HTML element on the page where you want the Elementor lightbox HTML
To apply this code across all pages, add it under Elementor Custom Code.
For a specific page, insert an HTML element and place the code below inside it.
<style>.elementor-slideshow__title a {
color: #eee; /* color of links in caption title */
}
.elementor-slideshow__description a {
color: #eee; /* color of links in caption description */
}
</style>
<script>
/* Code from https://element.how/elementor-lightbox-html-caption-links/
* Copyright 2023 Element.How
* Welcome to use on your own and your clients' sites
* No redistribution without permission
*/
document.addEventListener('click', function () {
setTimeout(function () {
if (document.querySelector('.elementor-lightbox .swiper-container, .elementor-lightbox .swiper') && document.querySelector('.elementor-lightbox .swiper-container, .elementor-lightbox .swiper').swiper) {
let swiperCont = document.querySelector('.elementor-lightbox .swiper-container, .elementor-lightbox .swiper');
let swiperInstance = swiperCont.swiper;
function updateCaptions() {
let imageElem = swiperCont.querySelector('.swiper-slide-active img');
let titleText = imageElem.getAttribute('data-title');
let descriptionText = imageElem.getAttribute('data-description');
let titleElem = swiperCont.querySelector('.elementor-slideshow__title');
let descriptionElem = swiperCont.querySelector('.elementor-slideshow__description');
titleElem.innerHTML = titleText;
descriptionElem.innerHTML = descriptionText;
}
updateCaptions();
swiperInstance.on('slideChangeTransitionEnd', function () {
updateCaptions();
});
}
}, 200);
});
</script>
Customize the link colors by modifying the initial part of the code as needed.
Now, be certain to be using the Title and Description fields in the Lightbox settings
For the code to function correctly with captions, ensure that ‘Title’ is set to ‘Title’ and ‘Description’ is set to ‘Description,’ as shown in the screenshot. You can find this setting under Site Settings > Lightbox in the editor.
Then, write your titles and description with all the HTML you need and require
Enter any desired HTML into the Title and Description fields for your images. This HTML will then appear in the Elementor Lightbox captions.
