How to add indicators on Squarespace lightboxes

Squarespace allows you to enable Lightbox on the selected images and galleries, one downside of that is sometimes users can’t know which are the Lightbox-enabled blocks among all of your page blocks. This free snippet from Ghost Plugins can help you highlight the lightbox-enabled elements.

Lightbox Indicator from Ghost Plugins

How to do

Once you land on the page, switch to How to install tab and look for 02 snippets, one for Javascript part and the other for Stylesheet

1. Copy and paste the script part into your page Header injection

2. Copy and paste the stylesheet into Custom CSS

3. After save and refresh your page, now you can see an expand icon on the top-right of your lightbox galleries images. Except there is none!

4. Turns out the root cause here is that the website where it hosts the icon has expired, therefore we can not load the icon anymore, to fix this, I will use the icon from Iconify and modify the code slightly, let’s copy this snippet below and replace the one in your Custom CSS.

In the updated code, I added a pseudo element to display a while background behind the expand icon

// Lightbox Indicator //

.sqs-block .lightbox, .sqs-block-gallery a[data-lightbox-theme="light"] img,  .sqs-block-gallery a[data-lightbox-theme="dark"] img{
  pointer-events: none;
}
lbb:before {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    background: url(https://api.iconify.design/material-symbols/pan-zoom.svg);
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}
lbb {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    padding: 1px;
    width: 30px;
    height: 30px;
    content: ' ';
    display: block;
    top: 10px;
    right: 10px;
    z-index: 9999;
    cursor: pointer;
    pointer-events: auto;
}

Some notes

With the updated snippet above, now your lightbox will have indicators to let user they are lightbox-ready and allow to be clicked. Notes that you have to enable lightbox on your images and gallery blocks to see these indicators. And a bad news for 7.1 users that the gallery sections are not supported by this script.

Bonus

Do you want to enhance your Squarespace Lightbox? Make it more engaged and keep user interacting with your content? Let’s try our plugin Lightbox Studio - Premium Squarespace lightbox plugin:

• It allows pinch-to-zoom gestures on mobile and scroll-to-zoom on desktop screen

• It can group your separated images lightboxes in a single lightbox galleries, making a seamless experience for users when browsing your images

Images Lightboxes group with Lightbox Studio