Lightbox images create an interactive viewing experience by overlaying images in the center of the screen with a dimmed background when clicked. This guide explains how to enable and customize lightbox functionality across different Squarespace sections.

Gallery Section (7.1)

To enable lightbox:

1. Click Edit > hover over gallery section > click pencil icon
2. Set Gallery Type to Grid: Simple, Strip, or Masonry
3. Toggle Lightbox to "On"
4. Save changes

To customize lightbox color:

1. Open site styles > Colors
2. Select matching theme > click pencil icon
3. Adjust Lightbox Background and icon colors
4. Save changes

Note: Captions won't display in lightbox. Click-through URLs override lightbox functionality.

Image Blocks

Supported in:

• Inline layouts (7.0 classic editor and 7.1 sections)
• Creative editor sections

To enable:

1. Open image editor > Design tab
2. Set layout to Inline
3. Toggle Lightbox on
4. Choose Dark or Light overlay
5. Save changes

Note: Captions show on hover. Creative editor sections don't support captions.

Grid Gallery Block

1. Add images
2. Click Design tab
3. Check Lightbox
4. Select Dark or Light overlay
5. Save changes

Note: Captions display on hover. Video thumbnails can open in lightbox.

Summary Block

• Automatically opens gallery images in lightbox
• Uses gray overlay
• Shows captions on hover
• Click-through URLs work only when browsing

Gallery Page (7.0)

Template-specific support with Light or Dark overlay options. Video descriptions don't appear in lightbox.

Key considerations:

• Grid layout required for most templates
• Captions typically show on hover
• Click-through URLs often disable lightbox
• Mobile support varies by template
• Some templates hide captions in lightbox view

For optimal performance, ensure your gallery layout matches template requirements and test functionality across devices.

Related Articles

Previous Articles