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
Hi Michael,
Your attributes solution was phenomenal and worked like a charm! Thank you so much for doing that:) Do you happen to know whether there is any scope to style the captions that appear in the lightbox? Thanks once again!
SA5 is actually using a caption area that Webflow already built into the lightbox. I’m not certain why they’re not using it themselves, but it doesn’t have any accessible component for styling in the designer.
You could inspect the HTML and use custom CSS to do some basic styling however.
If I put the placeholder image inside the collection list or the slider, it doesn’t bring in the alt-text. I don’t know why. Any tips would be much appreciated.
I’m currently working on another website and the script doesn’t seem to be working anymore. In the example built you’ve linked, you’re binding a ‘Caption’ plain text element, rather than Alt Text field.
In my cloneable the image’s Alt Text is bound to a CMS text field for separation. I haven’t revisited that since WF began supporting alt text in the asset manager.
Basically whatever you set the Image’s Alt Text property to is what will get picked up.
Ah right, I didn’t quite realise the separation aspect. I saw that in the field ‘Additional Images’, the photos there didn’t have any Alt Text set up- but equally they were not included in the website.
Have you had a chance to briefly look at my example and see why it may not be working? There’s a section called ‘Sessions in Practice’ which included multiple lightboxes. I wanted to add photo credits as Alt Text captions to the photos.
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. 