With the following code, you can add the alt text of the multi-image field images as a text element inside the opened lightbox.
You have to substitute the “your-image-class-goes-here” by the class you used in the images that are inside the lightbox clickable element.
/**
* Gathering the Data and storing inside an object,
* and pushing it into an array of objects
*/
const altData = [];
const allImages = document.querySelectorAll(".your-image-class-goes-here"); // <- change here
const getImgData = (img) => {
const imgData = {
_src: img.src,
_alt: img.alt,
};
return imgData;
};
allImages.forEach((el) => {
altData.push(getImgData(el));
});
/**
* Setting up Listeners to function when the Lighbox is open,
* and to when a new child is added to the w-lightbox-container element
*/
const htmlTag = document.querySelector("html");
const lightboxes = document.querySelectorAll(".w-lightbox");
const lbOpenObserver = new MutationObserver((mut) => {
mut.forEach((mutation) => {
if (mutation.target.classList.contains("w-lightbox-noscroll")) {
const lbContainer = mutation.target.querySelector(
".w-lightbox-container"
);
const slideChangeObserver = new MutationObserver((newMut) => {
if (newMut[0].target.classList.contains("w-lightbox-content")) {
const figureLB = newMut[0].target.querySelector("figure");
const imgLB = newMut[0].target.querySelector("img");
if (figureLB.children.length < 2) {
altData.forEach((entry) => {
if (entry._src == imgLB.src) {
const figcaption = document.createElement("figcaption");
figcaption.textContent = entry._alt;
//In case you want to style the figcaption, give it a class
figcaption.classList.add("lb-figcaption");
if (entry._alt) figureLB.appendChild(figcaption);
}
});
}
}
});
slideChangeObserver.observe(lbContainer, {
subtree: true,
childList: true,
});
}
});
});
lbOpenObserver.observe(htmlTag, { attributeFilter: ["class"] });
I’m hoping someone will be able to help me with a custom code workaround.
I need to be able to pull the alt text from each multi-image and replace the heading “Heading” with it. The alt text will be used as a title/name that is displayed on the live page. I’ve been able to get close with the above solutions but haven’t achieved what I want because I don’t need the text inside of a lightbox.
Thank you so much @Siton_Systems! The Code works great for me … BUT It seams to load all the Texts at once, since I have a slider. Do you have a Solution? Maybe its just a matter of combining it. Maybe you can have look.
<script>
(function () {
var sliderId = 'MultiImageSlider';
var collectionListWrapperId = 'MultiImageCollectionWrapper';
var slideClass = 'w-slide';
var leftArrowClass = 'w-slider-arrow-left';
var rightArrowClass = 'w-slider-arrow-right';
var slideNavClass = 'w-slider-nav';
var collectionItemClass = 'w-dyn-item';
var $slider = $('#' + sliderId);
var $slides = $slider.find('.' + slideClass);
var $collectionWrapper = $('#' + collectionListWrapperId);
var $images = $collectionWrapper.find('.' + collectionItemClass);
if ($slider && $collectionWrapper) {
$slider.css('opacity', 0);
if (!$images || !$images.length) {
$slider.remove();
}
else {
var imgCount = $images.length;
var slideCount = $slides.length;
if (imgCount > slideCount) imgCount = slideCount;
for (var i = 0; i < imgCount; i++) {
$slides[i].style.backgroundImage = $images[i].style.backgroundImage;
}
for (var i = slideCount; i > imgCount; i--) {
$slides[i - 1].remove();
}
if (imgCount < 2) {
$slider.find('.' + leftArrowClass + ', .' + rightArrowClass + ', .' + slideNavClass).remove();
}
$slider.css('opacity', 1);
}
$collectionWrapper.remove();
}
})();
$(function() {
$('.images img').each(function () {
var caption = ($(this).attr('alt'));
$(this).next().text(caption);
});
});
</script>
The Slider is also nice if someone is interessted. Projekt
After quite a time of research, I found that to be the most instinctive and clear tutorial for captions(slider questions apart), just copy the code from the example in the custom code of your CMS page and then you just have to set some classes
It seams to load all the Texts at once, since I have a slider. Do you have a Solution? Maybe its just a matter of combining it. Maybe you can have look. 