A lightbox effect creates an overlay that displays enlarged images with a faded background when clicked. Here's how to set it up across different Squarespace elements:

Gallery Sections (Version 7.1)

1. Enable lightbox:

• Click Edit on page
• Hover over gallery section and click pencil icon
• Select Grid layout (Simple, Stacked, or Mosaic)
• Enable Lightbox option
• Save changes

2. Customize lightbox colors:

• Open Site Styles panel > Colors
• Click pencil icon on matching theme
• Adjust Background and Icon settings under Galleries
• Save changes

Note: Captions don't display in Gallery section lightboxes. URLs override lightbox functionality.

Image Blocks

Supported in:

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

To enable:

1. Open Image block editor
2. Click Design tab
3. Select Inline layout (if available)
4. Enable Lightbox option
5. Choose Dark or Light overlay

Grid Gallery Blocks

1. Add images to Gallery block
2. Click Design tab
3. Select Lightbox
4. Choose Dark or Light overlay

Notes:

• Captions show on hover (tap dot icon on mobile)
• Not supported in Slideshow, Carousel, or Stack layouts
• URLs override lightbox functionality
• Enable "Use Thumbnail" for video lightboxes

Summary Blocks

• Automatically opens lightbox for Gallery page connections
• Always uses dark overlay
• Shows captions on hover
• URLs override lightbox when viewing page
• URLs disabled in lightbox view

Gallery Pages (Version 7.0)

Lightbox support varies by template:

• Most templates support grid layout with hover captions
• Destination URLs typically disable lightbox
• Video descriptions don't display
• Mobile support varies by template
• Some templates offer custom lightbox triggers

Important Limitations:

• No pinch-to-zoom on mobile
• Template-specific features and restrictions apply
• Caption behavior varies by implementation
• URL destinations affect lightbox functionality

Related Articles

Previous Articles