Add Captions to the Gallery Lightbox

What does this code do?

Currently in Squarespace 7.1, you can add captions to a Gallery Section. However, these captions don’t appear in the Gallery’s Lightbox. This code snippet will allow you to have the caption display under the image in the Gallery Lightbox.

Video Tutorial

Step 1: Add Captions to the Gallery

Go to the page you have the gallery on and click to edit the Gallery. Add a description to each image. This will be the caption that is used in the Lightbox. If you would like the captions to display under the image on the Gallery Page as well as in the Lightbox, click to edit the section and make sure captions are turned on.

Step 2: Copy and paste this code into the Footer Code Injection

<!-- Caption in Lightbox Gallery -->
<script>
(function () {
  var galleryImage = document.querySelectorAll(".gallery-lightbox-item-img");
  
  for (i=0; i< galleryImage.length; i++) {
    var captionWrapper = document.createElement("p");
    captionWrapper.classList.add("lightbox-caption");
    galleryImage[i].append(captionWrapper);
    var caption = galleryImage[i].querySelector("img").getAttribute("alt");
    captionWrapper.innerHTML = caption;
  }
})();
</script>

Step 3: Copy and paste this code into the Custom CSS

/* Caption in Lightbox */
.gallery-lightbox-item-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gallery-lightbox-item-img img {
  height: 90% !important; //height of image on desktop
}
@media only screen and (max-width:640px) {
 .gallery-lightbox-item-img img {
  height: 70% !important; //height of image on mobile
}
}
p.lightbox-caption {
  padding-top: 1vw; //space above caption
  color: black; //color of caption
  text-align: center; //text aligned in the center
}

Then edit the color of the caption and sizes.