How to Enable and Customize Image Lightbox in Squarespace

How to Enable and Customize Image Lightbox in Squarespace

By Michael Turner

January 29, 2025 at 05:15 AM

The lightbox effect enlarges images in a centered overlay with a dimmed background when clicked. Visitors can close it by clicking the X in the upper corner.

Gallery Section (7.1)

  • Works with Grid layouts (Simple, Stacked, Masonry)
  • Enable via section styles while editing
  • Customize lightbox color in Site Styles > Colors > Gallery section
  • Note: Captions don't display; URLs override lightbox function

Image Blocks

  • Supported in Inline layout and Intuitive Editor sections
  • Enable in Design tab > Lightbox option
  • Choose Dark or Light overlay
  • Captions show on hover (mobile: tap dot icon)
  • URLs open lightbox instead of link

Grid Gallery Blocks

  • Enable in Design tab
  • Select Dark or Light overlay
  • Captions visible on hover
  • Video thumbnails supported
  • URLs override lightbox function

Summary Blocks

  • Automatic Dark lightbox for grid/mural layouts
  • Links to gallery pages open in slideshow mode
  • URLs disable lightbox function
  • Captions show on hover

Gallery Page (7.0)

  • Template-dependent functionality
  • Light/Dark options in Site Styles
  • Video descriptions hidden
  • Compatible templates:
    • Aviator: Grid layout, hover captions
    • Bedford: Grid layout, URLs disable lightbox
    • Brine: Grid layout, hover captions
    • Farro: Grid layout, hover captions
    • Pacific: Grid layout, works with Index Pages
    • York: Grid layout, hover captions

Remember:

  • Mobile devices don't support pinch-to-zoom
  • Add text links in descriptions for both lightbox and URL function
  • Some templates have limited or no lightbox support
  • Slideshow layouts don't support lightbox

*Note: Template compatibility and features may vary based on version and layout choices.

Related Articles

Previous Articles