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

Wondering if you ever found a solution to this? I'm in search of a solution to the same problem! Thank you