Multi Image Field - show alt tag as text

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

Sorry I dont get this… where does the Alt text show on the page?
I have cloned your site but cant see the text.

Hi guys,
Is it possible to make the alt-text work as a link also?
I mean insted of a name for the image i want it to be a clickable url.

Thanks

Thank you much! Its works for me

Hey everyone!

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.

Read-only link

Live staging site

Thank you

Thank you so much @Siton_Systems! The Code works great for me … BUT :slight_smile: 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. :pray:

<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

To add alt-text as captions to CMS-lightboxes, I built a nocode attributes approach.
Here are the docs.

And a cloneable;

1 Like