How to Enable and Customize Image Lightbox Effects in Squarespace

How to Enable and Customize Image Lightbox Effects in Squarespace

By Michael Turner

January 29, 2025 at 03:45 AM

A lightbox effect displays images in a centered overlay with a darkened background when clicked, allowing visitors to view enlarged versions while the rest of the page remains blurred. Close the lightbox by clicking the X in the upper corner.

Gallery Sections (Version 7.1)

To enable lightbox:

  1. Click Edit on the page and click the pencil icon over the gallery section
  2. Set gallery type to Grid: Simple, Grid: Stacked, or Grid: Board
  3. Toggle the Lightbox switch on
  4. Click Save or Exit and Save

To style the lightbox:

  1. Open Site Styles and click Colors
  2. Click the pencil icon on your gallery section's theme
  3. Use Lightbox Background to set color
  4. Adjust Lightbox Icon for navigation controls
  5. Save changes

Note: Captions don't display in gallery section lightboxes. Click-through URLs override lightbox functionality.

Image Blocks

Lightbox support:

  • Inline layout (7.0 and 7.1 classic editor)
  • Fluid Editor sections

Enable lightbox:

  1. Open image editor
  2. Click Design tab
  3. Select Inline layout
  4. Turn on Lightbox switch
  5. Choose Dark or Light overlay

Grid Gallery Blocks

  1. Add images to Grid gallery Block
  2. Click Design tab
  3. Select Lightbox
  4. Choose Dark or Light overlay

Note: Captions show on hover. Mobile users tap dot icon to view captions.

Summary Blocks

  • Board/grid Summary Blocks linked to Gallery Pages open images in dark lightbox slideshow
  • Captions display on hover
  • Click-through URLs override lightbox in page view
  • URLs disabled in lightbox view

Gallery Pages (7.0)

Lightbox support varies by template. Standard Gallery Pages offer Light/Dark lightbox options in Site Styles. Video descriptions don't display in lightbox.

Template-specific features:

  • Most templates support Grid view with hover captions
  • Click-through URLs typically disable lightbox
  • Mobile support varies by template
  • Some templates have unique lightbox triggers or display options

Note: Touch zoom for lightbox images isn't supported on mobile devices.

Related Articles

Previous Articles