How to enable lightbox indicators on Squarespace

In the last post, I introduced a free snippet that can show indicators on Squarespace lightbox elements, including Image blocks and Gallery blocks. Now, this feature has been incorporated into Lightbox Studio - a premium Squarespace lightbox zoom plugin with some interesting enhancements. Let’s explore how.

What is a Lightbox Indicator?

A lightbox indicator is a small icon that displays inside a lightbox-enabled element to let users know they’re about to open a lightbox. By activating Lightbox Studio, these elements can open a lightbox:

  • Image blocks Inline layout

  • Image blocks in Fluid engine

  • Gallery blocks Grid layout

  • Gallery blocks other layouts (Slideshow, Carousel, Stacked)

  • Gallery sections Grid layout

  • Gallery sections Slideshow layout

  • Summary blocks (7.0 templates)

  • Gallery pages (7.0 templates)

There are also different types of lightbox indicators available with Lightbox Studio, including:

  • Lightbox slide indicator

  • Clickthrough slide indicator

  • Lightboxify gallery indicator

Example of Lightbox Indicators

Example of Lightbox indcators

Lightbox Slide Indicator

When the Squarespace lightbox is enabled, the slide indicator will be displayed to let users know clicking on the image will expand that image into a lightbox effect.

Clickthrough Slide Indicator

If you add a Clickthrough URL to an image or gallery slide, the link icon will display, letting users know that clicking on the image will open a new URL.

Note: When lightbox is enabled for Image blocks or Gallery block Grid layout, and you add a Clickthrough URL, clicking on the image will open the lightbox instead of the link, so these types of elements won’t have a Clickthrough indicator.

Lightboxify Gallery Indicator

This is a special feature of Lightbox Studio. When set up properly, clicking on images will open their own lightbox series, displaying detail shots separate from the parent gallery page.

The icon in this kind of indicator is different from the other two, letting users know what to expect when they click on the images.

How to enable Indicators

The Lightbox Studio indicators feature is not enabled by default. After activating the plugin, you can visit the Playground in the Lightbox Studio page, change the settings, then copy the generated snippet to replace the current one in your Footer injection, as explained here.

  1. Activate Lightbox Studio: Start by installing and activating the Lightbox Studio plugin.

  2. Visit the Playground: Go to the Lightbox Studio page and access the Playground.

  3. Change Settings: Adjust the settings to your preference and enable the lightbox indicators.

  4. Copy the Snippet: Copy the generated snippet.

  5. Footer Injection: Replace the current snippet in your Footer injection with the new one from Lightbox Studio.

Enable lightbox indicator

Preview Lightbox indicator features

Frequently Asked Questions (FAQ)

Question: What is Lightbox Studio?

Lightbox Studio is a premium Squarespace lightbox plugin that enhances lightbox functionality on your website. It allows you to add zoom effects, display indicators, and customize how images and galleries are presented in lightboxes.

Question: Which Squarespace templates are supported?

Lightbox Studio support all Squarespace 7.0 and 7.1 templates, so you can enable Lightbox indicators for those templates.

Question: Can an image open in lightbox and clickthrough at the same time?

No, it cannot. Depending on the elements, when you enable lightbox and add clickthrough URLs, clicking on the image will either open the lightbox or navigate to a new link. If you want images to open links within the lightbox, add the link to the image or gallery captions.

Question: Captions don't appear in lightbox view on Squarespace Gallery sections. How can I fix this?

Lightbox Studio supports captions on all galleries, including Gallery sections. You can change the settings to display captions in the lightbox only and hide the main Gallery section captions. This ensures that captions are visible where you need them.

Previous
Previous

How to display Delivery datepicker values on Shopping Cart page

Next
Next

How to change date on squarespace blog post