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