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:
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
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-galleryLightboxify attributes: ?
lightboxify=true&lightboxify-mode=galleryGallery 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
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
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
