Here's a concise and valuable guide to configuring lightbox effects for images:

A lightbox creates an overlay that displays enlarged images with a dimmed background when clicked. Users can close the lightbox by clicking the X in the top corner.

Important Note: Pinch-to-zoom is not supported for lightbox images on mobile devices.

Gallery Sections (v7.1)

To enable lightbox in grid layouts:

1. Click Edit on the page
2. Hover over Gallery section and click the pencil icon
3. Select Grid: Simple, Grid: Stacks, or Grid: Mosaic layout
4. Enable the Lightbox option
5. Save changes

To customize lightbox colors:

1. Open Site Styles panel
2. Click Colors
3. Select your Gallery section's theme
4. Adjust Background and Lightbox Icon settings
5. Save changes

Image Blocks

Lightbox is supported for:

• Inline layout (v7.0 and v7.1 classic editor)
• Sections in intuitive editor

To enable:

1. Open image editor
2. Click Design tab
3. Select Inline layout
4. Enable Lightbox
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

Important Considerations

• Captions display on hover (desktop) or dot icon tap (mobile)
• Adding destination URLs typically disables lightbox
• Video thumbnails require "Use Thumbnail" option
• Summary blocks connected to Gallery pages automatically use dark lightbox
• Gallery page lightbox support varies by template

Template-Specific Notes

For Grid Gallery Pages:

• Most templates support lightbox with hover captions
• Destination URLs typically disable lightbox
• Some templates (like Montauk and Tremont) don't support lightbox
• Mobile support varies by template

Remember that lightbox features and options may vary depending on your template and version. Always test functionality across devices after implementation.

Related Articles

Previous Articles