PhotographerM

Hello! 
I am also trying to get captions to display under my images on the Beaumont 7.1 template but not while in the grid view. This code works except that there is a lag in the caption switch when I go to the next image: the previous images' caption remains overlayed on the current caption for one second before disappearing. I've tried chat GPT solutions and haven't found a solution. thanks for any help. Do I need to share my website info?
 
<script>
document.addEventListener("DOMContentLoaded", function () {
  // configure the classes we're looking for
  const listClass = "div.gallery figure";
  const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a";
  const lightBoxCaption = "lightbox-caption";
  const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']";
  // select all gallery elements, find their captions
  // if they exist then extract the slide id and update the caption element
  // in the lightbox slide below the image
  document.querySelectorAll(listClass).forEach((element) => {
    const a = element.querySelector(linkClass);
    const c = element.querySelector("figcaption");
    if (a && a.href && c) {
      const id = a.href.split("=")[1];
      const lbSelector = lightboxSlideSelector.replace("{0}", id);
      const lb = document.querySelector(lbSelector);
      if (lb) {
        // Update the lightbox caption text content with the new content
        const lbCaption = lb.querySelector(`.${lightBoxCaption}`);
        if (lbCaption) {
          lbCaption.textContent = c.textContent;
        } else {
          // Create a new caption element and set its text content
          const newCaption = document.createElement("figcaption");
          newCaption.className = lightBoxCaption;
          newCaption.textContent = c.textContent;
          // Append the new caption below the image in the lightbox slide
          lb.appendChild(newCaption);
        }
      }
    }
  });
});