A lightbox is a design effect that opens an image in a centered overlay and dims the rest of the page when an image is clicked. Clicking the x in the top corner closes it and returns to the page. Lightboxes are a great way to highlight and enlarge images for visitors who want to get a closer look.
Before you begin
- Some features aren't compatible with lightboxes or work differently when lightboxes are enabled. For example, with Gallery sections and Image Blocks.
- Pinch-to-zoom isn't supported for lightbox images on mobile devices.
- If your site is on Squarespace version 7.0, Gallery Page options vary depending on your template.
Change the lightbox background color
For gallery sections on version 7.1, you can style your lightbox to any color in the Section Themes editor.
In most other cases, you can choose a Dark or Light overlay for the lightbox in the block settings or Site Styles. For more specifics, see the sections on Image Blocks, Gallery Blocks, and Gallery Pages.
Gallery sections (version 7.1)
Gallery sections in grid layouts on version 7.1 have a lightbox option in section styles. To enable the lightbox:
- Click Edit on the page, then hover over the gallery section and click the pencil icon.
- Ensure the Gallery Type is set to Grid: Simple, Grid: Strips, or Grid: Masonry. Slideshow layouts don't support lightbox features.
- Switch the Lightbox toggle on.
- Hover over Done and click Save.
To style the lightbox color:
- In the Home Menu, click Design, then click Colors.
- Click Section Themes.
- Hover over the theme that matches your gallery section and click the pencil icon.
- Under the Galleries section, use the Lightbox Background tweak to pick a lightbox color.
- To change the color of lightbox navigation controls, use the Lightbox Icon tweak.
- Click Save.
Keep in mind:
- Caption text doesn't display in the gallery section lightbox.
- If you add clickthrough URLs to images then turn on lightbox, clicking the image goes to the URL. The lightbox won't open.
Image Blocks
Image Blocks using the Inline layout support a lightbox. To enable it:
- Add an Image Block, or double-click an existing Image Block to open the image editor.
- Click the Design tab.
- Ensure your layout is set to Inline. Other layouts don't support a lightbox.
- Check Enable Lightbox.
- Choose between Dark Overlay and Light Overlay for your lightbox style with the Lightbox Theme drop-down.
- Click Apply to save your changes.
Keep in mind:
- Captions always display when you hover over lightbox images, regardless of which caption display option you choose. On mobile, they display when you tap the dot icon.
- If you add clickthrough URLs and enable lightbox, the clickthrough URL won't work.
- To keep lightboxes enabled and link images, add a text link to the image's description. For Image Blocks, certain layouts also support buttons.
Grid Gallery Blocks
After adding your images to a Grid Gallery Block, click the Design tab and check Lightbox. Set your lightbox slideshow style by choosing Dark Overlay or Light Overlay from the drop-down.
Captions always display when you hover over lightbox images. On mobile, they display when you tap the dot icon. Slideshow, Carousel, and Stack Gallery Blocks don't support a lightbox.
If you add clickthrough URLs and enable lightbox, clicking the image opens the lightbox instead of the URL.
Summary Blocks
When a Wall or Grid Summary Block is connected to a Gallery Page, the images automatically open in a lightbox slideshow. The Summary Block lightbox color is always Dark. Captions display on hover.
The lightbox slideshow affects clickthrough URLs:
- While viewing the page, images with clickthrough URLs open the clickthrough link when clicked, rather than opening the lightbox slideshow.
- When the lightbox slideshow is open, clickthrough URLs are disabled.
Tip: If you're on version 7.0 and linking a Summary Block to a Gallery Page, check Use Thumbnail on the Gallery Page's videos. Otherwise, they'll play in the Summary Block without opening in a lightbox.
Gallery Pages (version 7.0)
Some templates' Gallery Pages on version 7.0 support a lightbox feature. For standard Gallery Pages, you can set the lightbox color to Light or Dark in Site Styles. Video descriptions don't display in the lightbox.
To learn how lightbox options work in these template families, see the table below.
| Template family | Lightbox options |
| Adirondack |
|
| Avenue |
|
|
Aviator |
|
|
Bedford |
|
|
Brine |
|
|
Farro |
|
| Five |
|
| Flatiron |
|
| Forte |
|
| Galapagos |
|
| Ishimoto |
|
| Momentum |
|
|
Montauk |
|
| Native |
|
|
Pacific |
|
|
Skye |
|
| Supply |
|
|
Tremont |
|
| Wells |
|
| Wexley |
|
|
York |
|
Comments
0 comments
Article is closed for comments.