How to open a gallery lightbox on button click

Squarespace's gallery lightbox is typically available only for galleries and product images. However, by utilizing Lightboxify URLs, you can configure a Button block to open a lightbox gallery. This allows you to display individual gallery images with previous and next navigation, as shown in the screenshot below:

Lightbox gallery on button

The instructions here will show you how to create a Button block and a Source gallery, then insert a lightboxify URL to button link to make it all work. With this method, we can add buttons to a page in Squarespace and open a different lightbox gallery upon clicking the buttons.

Step-by-Step Instructions

1. Create a Source Gallery

First, create a source gallery that will house the images you want to display in the lightbox.

• Create a blank page

• Insert a Gallery block, upload your images & videos to the gallery

• Put a name for the page and get its URL, for example /source-gallery

2. Create the Lightboxify URL

To create the Lightboxify URL, you need to follow these steps:

• Source gallery URL: /source-gallery

• Lightboxify attributes: ?lightboxify=true&lightboxify-mode=gallery

• Gallery block ID: Append the gallery block ID at the end of the URL.

Your final Lightboxify URL should look something like this:

/source-gallery?lightboxify=true&lightboxify-mode=gallery#gallery-block-id

Head to this page if you want to insert Gallery section instead, also the blockID is optional

3. Create a Button Block

You can add a Button block to any Squarespace page or post, whether in Classic sections or Fluid sections.

1. Edit a post or page: Go to the post or page where you want to add the button.

2. Add the Button block: Click on the insert point or "Add Block," then select "Button" from the block selector.

3. Edit the Button: Customize the button text and style.

4. Attach the Lightboxify URL: Click "Attach Link" then copy and paste your Lightboxify URL into the link field.

4. Save and Preview

1. Click Save to apply your changes.

2. Open your live site and click the button. Instead of redirecting, it should open the Squarespace gallery lightbox.

Supported Lightboxify Attributes

In order to configuring your gallery lightbox settings using lightboxify URLs, you can enhance its functionality by adding various Lightboxify URL parameters to the end of the URL in your button link.

URL parameters begin with a question mark (?). For example:

/source-gallery?lightboxify=true&lightboxify-mode=gallery&lightboxify-theme=dark#gallery-block-id

Lightboxify URL parameters only apply to the specific URL where the parameters are added. Below are the current supported Lightboxify attributes:

Parameter	Required	Supported Values	Default Value	Description
lightboxify	Yes	true/false	None	Activates the lightbox feature.
lightboxify-mode	No	gallery	gallery	Specifies the mode of the lightbox.
lightboxify-theme	No	light/dark	light	Specifies the theme of the lightbox.

Using multiple lightboxify parameters 

If you are adding multiple parameters to the same lightboxify URL, you’ll need to separate them with ampersands (&). For example: 

/source-gallery?lightboxify=true&lightboxify-mode=gallery&lightboxify-theme=dark#gallery-block-id

Example

Try to click on this button and preview the Squarespace gallery lightbox opens

Frequently Asked Questions

Question: Does it have to be /source-gallery?

No, it doesn't have to be /source-gallery. This URL is just an example. You can use any URL that points to the page or block containing the gallery you want to display in the lightbox. Ensure the URL correctly references your specific gallery.

Question: When should I use ampersands (&) and the question mark (?)?

In a URL, the question mark (?) is used to start the query string, which contains the parameters for the Lightboxify functionality. The ampersands (&) are used to separate multiple parameters within the query string.

For example:

/source-gallery?lightboxify=true&lightboxify-mode=gallery&lightboxify-theme=dark#gallery-block-id

In this example:

• The ? begins the query string.

• The & separates each parameter (lightboxify=true, lightboxify-mode=gallery, lightboxify-theme=dark).

This format ensures that all the parameters are correctly passed to enable the lightbox with the specified attributes.

Question: I can not find Gallery blocks to insert?

Use Classic Gallery block to insert Gallery block on your 7.1 sections. Btw, you also can insert a gallery section as Source gallery as well

Question: How to open a different lightbox gallery for each image in a grid gallery

Any gallery layout (not only Grid, but also Slideshow, Carousel, Reel…) that supports clickthrough URLs can be set up to open a unique lightbox gallery for each of its images, you just need to create the lightboxify URLs as instructed and append to the gallery image, check more details here.

Question: Does each source gallery need to be on a separate page?

No, you can put all seperate source galleries on single (01) page, and link to them using their Section IDs (if you use Gallery section) or Block IDs (if you use Gallery block). Learn more about the IDs config in this post