How to Show Captions Only in Lightbox View in Squarespace 7.1

Squarespace Tutorial
Written By Walid Hasan

Squarespace 7.1 provides a stunning way to showcase images with the help of Gallery Blocks and Sections. But out of the box, captions will display in the grid, and also within the lightbox, and for some designs, that can get a little much, especially if you’re going for a clean, minimal gallery layout to begin with.

If you want to hide the captions in the grid but still want to display them when they open in a lightbox popup, then this tutorial is for you.

We’ll use a lightweight little jQuery functionality and some of our own custom CSS to make a nice little elegance of hiding your captions in the gallery and having them display beautifully styled inside the lightbox.

Why Use Lightbox-Only Captions?

Here are some of the reasons this approach is so perfect:

  • Maintains your grid layout clean and neat

  • Captions don't show unless a photo is tapped or clicked on by a user.

  • Improves mobile user experience

  • Handy for portfolios, product specifics, or photo storytelling

Step-by-Step Guide

Step 1: Add JavaScript to Inject Captions into the Lightbox

Go to Settings → Advanced → Code Injection → Footer and paste the following script:

Copied!

<!-- jQuery (if not already included) -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>

function createNodeCaption(textContent){

var divElement = document.createElement("div");

var pElement = document.createElement("p");

pElement.innerHTML = textContent;

divElement.classList.add("style-gallery-lightbox-text");

divElement.appendChild(pElement);

return divElement;

}

$(document).ready(function() {

var itemGallery = document.getElementsByClassName('gallery-grid-item');

var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item');

var countGalleryItem = itemGallery.length;

for (var i = 0; i < countGalleryItem; i++) {

if (itemGallery[i].getElementsByTagName('p').length != 0) {

var text = itemGallery[i].getElementsByTagName('p')[0].textContent;

var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0];

itemNeedCaption.appendChild(createNodeCaption(text));

}

}

});

</script>

What it does:
This script copies each image caption from the gallery grid and inserts it directly into the lightbox, so you can safely hide it in the grid.

Step 2: Hide Captions in the Grid and Style Them in the Lightbox

Now go to Pages → Custom code → Custom CSS paste the following styles:

Copied!

/* Hide captions in the gallery grid */
figcaption.gallery-caption.gallery-caption-grid-simple {
  display: none;
}
/* Style for captions inside lightbox */
.style-gallery-lightbox-text {
  padding: 10px 0 25px;
  position: absolute;
  left: 50%;
  top: 90%;
  width: 80%;
  transform: translate(-50%, -50%);
  font-size: 1em;
}
.style-gallery-lightbox-text p {
  width: 90%;
  padding: 20px 15px;
  margin: auto;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
}
@media screen and (max-width: 767px) {
  .style-gallery-lightbox-text {
    top: 70%;
  }
}

Design Tip: Feel free to adjust the top, font size, or background color to better match your site’s branding.

Mobile-Friendly by Design

  • The caption automatically shifts up on smaller screens for visibility

  • Touch gestures remain unaffected

  • Fully compatible with the default Squarespace gallery behavior

Final Thoughts

Squarespace doesn't provide a native option to show captions only in the lightbox, but this custom solution gets the job done beautifully.

With just a bit of code, you can:

  • Maintain a clean, modern gallery layout

  • Enhance the image-viewing experience

Frequently Asked Questions (FAQs)

1. Is it possible to have image captions in Squarespace display in the lightbox only by default?

No, Squarespace by default will display captions in both the gallery grid and lightbox. However, with a little custom code (JavaScript and CSS), you can hide the caption in the grid but keep it beautifully on show in the lightbox.

2. Does this solution work with all gallery block types?

This is for the Gallery Section and Gallery Blocks on the default lightbox in Squarespace 7.1. It may not work if you are using custom gallery plugins or third-party additions to the gallery.

3. Is jQuery already included in Squarespace, or do I need to add it manually?
Older Squarespace templates may not include jQuery by default. To be safe, include it manually using this line before your script:

Copied!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

4. Where should I paste the JavaScript code?
Go to your Squarespace backend and navigate to:
Settings → Advanced → Code Injection → Footer
Paste the full JavaScript snippet there.

5. How do I hide captions in the grid but still display them in the lightbox?
After injecting the script, add this CSS to Pages → Custom code → Custom CSS:

Copied!

figcaption.gallery-caption.gallery-caption-grid-simple {
  display: none;
}

This hides captions in the gallery layout. The JavaScript will move them into the lightbox.

6. Can I style the lightbox captions to match my brand?
Absolutely. The blog provides a default style, but you can update font size, padding, background color, and position to better fit your site’s design.