Jump to content

Coded caption under photo in lightbox is being cut

Go to solution Solved by nowicluk,

Recommended Posts

Hi, I used a code posted by @tuanphan for a website to show captions for photos in the lightbox. Everything worked perfectly fine until I discovered that the text is limited and automatically cut. Does anyone have a solution so all the text is displayed fully? Below is the link to the website and the password. The first photo of the gallery has the example of the caption being cute in the lightbox on desktop and mobile. Appreciate the help. Thank you.

https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close

Password: tcl2022

Link to comment
  • 2 weeks later...
  • Solution

Solved myself, below is the code I used from another member: 

 

<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 add a new caption element
    // to the lightbox slide
    const n = document.querySelectorAll(listClass);
    for (var i = 0; i < n.length; i++) {
      const a = n[i].querySelector(linkClass);
      const c = n[i].querySelector("figcaption");
      if (a && a.href && c) {
        const id = a.href.split("=")[1];
        const lbSelector = lightboxSlideSelector.replace("{0}",id);
        const lb = document.querySelector(lbSelector);
        const cp = document.createElement("figcaption");
        cp.className = lightBoxCaption;
        cp.innerHTML = c.innerHTML;
        lb.appendChild(cp);
      }
    }
  });
</script>
<style>
figcaption.gallery-caption {
  display:none;
}
figcaption.lightbox-caption {
  bottom:0;
  font-family: "Europa", serif;
  font-style: regular;
  font-size: 16px;
  line-height: 1.4em;
  color: #061A37;
  text-align:justify;
}
</style>

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.