How to open different lightbox gallery for each image in Gallery block

In a Squarespace Gallery block, clicking an image usually opens a lightbox gallery displaying all images together. In this tutorial, we’ll guide you through creating a grid gallery where each image opens its own unique lightbox gallery. This approach lets each image in your grid showcase a distinct set of media, offering a more dynamic and customized viewer experience.

Using lightboxify URLs, you’ll learn how to transform your galleries into this enhanced format, where each image links to a separate lightbox gallery.

Step-by-Step Guide

1. Create the Source Gallery:

1.1 Create a new page,

Create new Blank page

Create the source gallery page

1.2 Name it properly, for example: /source-gallery

Open the page

Name the page

1.3 Insert Gallery blocks

Insert a Gallery block

Insert Gallery block

2. Create the Lightboxify URL

2.1 Use Chrome extension to grab the ID of the Gallery blocks

Get the block ID

Create lightboxify URL

2.2 The Lightboxify will look like this: /source-gallery?lightboxify=true#block-yui_3_17_2_1_1716134815539_3510

  • Source gallery page: /source-gallery

  • Lightboxify url parameter: ?lightboxify=true

  • Target block ID: #block-yui_3_17_2_1_1716134815539_3510

Note to readers: You can either use Gallery block or Gallery section as Source gallery. If the Gallery ID isn’t available in the URL, Lightbox Studio will automatically use the first gallery block or section of the page.

3. Insert the Lightboxify URL to gallery

In this specific tutorial we will insert the URL to a Gallery block, other gallery layout will have different ways to append URLs to images

3.1 Open the page where you want to put the dynamic lightbox, for example: /home

Open the gallery page

Edit the page

3.2 Start editting the Gallery in page you opened

Edit the gallery

Edit the gallery

3.3 Edit image clickthrough

Add lightboxify URLs to image

Save the edit

3.4 Put in the Lightboxify URL to the link input, then Save. Your gallery will looks like this

Lightboxify Gallery enabled

Different lightbox gallery created

4: Save and preview

Continue creating source gallery pages and insert links to the Gallery block until you're finished. Upon saving and previewing, when clicking on the grid gallery images, different lightbox galleries will open separately, each with its own set of media.

Important: The gallery lightboxify URLs will not work if you have enabled the lightbox option for the gallery, so ensure the lightbox option is turned off.

Other layout support

This method works with all Squarespace gallery blocks, including the following layouts:

  • Grid layout

  • Slideshow layout

  • Carousel (Slider) layout

  • Stack layout

Below is the demostration video where each slide in a Grid gallery block is opening a seperate gallery when click, including the image itself

Frequently Asked Questions (FAQs)

Previous
Previous

Embedding AI Chatbots into Your Squarespace Website

Next
Next

Showcase Projects with unique lightbox galleries in Squarespace