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 video below:
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
Check below video instruction below
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 or section, 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-galleryLightboxify attributes: ?
lightboxify=trueInsert a Gallery block or Gallery section and grab one of the following Gallery IDs (you can use the Squarespace ID Finder)
Section ID: Found in the format
section[data-section-id="661df2d06d4b51239f4e87b7"], use the part after the equals sign (e.g.,661df2d06d4b51239f4e87b7).Block ID: Found in the format
#block-yui_3_17_2_2_1716172038600_2128, use the part after the#(e.g.,block-yui_3_17_2_2_1716172038600_2128).Section anchor ID: you can also use the anchor id of Squarespace section, by edit section -> scroll to Anchor Link and assign your unique anchor ID for the section
Lightboxify gallery ID
Your final Lightboxify URL should look something like this:
/source-gallery?lightboxify=true#gallery-id
Head to this page if you want to insert Gallery section instead, also the Gallery ID is optional, when Gallery ID is missing it will try to grab the first gallery block or section in the page
3. Create a Button Block
You can add a Button block to any Squarespace page or post, whether in Classic sections or Fluid sections.
Edit a post or page: Go to the post or page where you want to add the button.
Add the Button block: Click on the insert point or "Add Block," then select "Button" from the block selector.
Edit the Button: Customize the button text and style.
Attach the Lightboxify URL: Click "Attach Link" then copy and paste your Lightboxify URL into the link field.
4. Save and Preview
Click Save to apply your changes.
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
In Lightboxify URLs, 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.
Example Format:
URL Structure: /source-gallery?lightboxify=true&lightboxify-mode=gallery&lightboxify-theme=dark#gallery-block-id
The ? begins the query string.
The & separates each parameter (e.g., 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. For more details, you can refer to the Lightboxify URLs FAQ.