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"] });