# How To Open A Gallery Lightbox On Button Click
**Source:** https://beyondspace.studio/blog/how-to-open-a-gallery-lightbox-on-button-click
**Language:** French (France)

---

# How to open a gallery lightbox on button click

Apr 11

Written By Beyondspace

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-gallery`
- Lightboxify attributes: **?**`lightboxify=true`
- Insert 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.

1. Edit a post or page: Go to the post or page where you want to add the button.
2. Add the **Bouton**  block: Click on the insert point or "Add Block," then select "Button" from the block selector.
3. Edit the **Bouton** : 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 **Enregistrer**  to apply your changes.
2. Open your live site and click the button. Instead of redirecting, it should open the Squarespace gallery lightbox.

LLMS.txt notice

**Squarespace now support LLMS.txt natively**  
On 27-Jul-2026, Squarespace announced support for LLMS.txt files for all 7.1 sites.
  

*Go to SEO/AI Visibility > SEO Settings > LLMS.txt*
  
  
! Only available for admin accounts of the site

Lire la suite →

## 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 | Oui | 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

Open a Gallery lightbox

## Frequently Asked Questions (FAQs)

When should I use ampersands (&) and the question mark (?) in Lightboxify URLs?

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.

Lire la suite →

Does Lightboxify URL have to be /source-gallery?

No, the URL does not have to specifically be /source-gallery. This URL is just an example. You can use any URL that points to the page that is containing the gallery you want to display in the lightbox. Just ensure that the URL correctly references your specific gallery.

For more details, you can refer to this blog post about opening dynamic gallery lightbox using Lightboxify URL.

Lire la suite →

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

To open a different lightbox gallery for each image in a grid gallery, you can follow these steps:

1. **Create Source Galleries**

   - Insert a Gallery block or section a page (e.g., /source-gallery)
2. **Insert Lightboxify URLs**

   - Your Lightboxify URL should look like this:  
     /source-gallery?lightboxify=true&lightboxify-mode=gallery#gallery-id
3. **Link Images to Their Corresponding Lightboxify URLs**

   - Link each image to its corresponding Lightboxify URL.
4. **Save and Preview**

   - After linking all images, save the changes. Each image should now open its unique lightbox gallery when clicked.

For more detailed instructions, you can refer to this blog post.

Lire la suite →

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

No, each source gallery does not need to be on a separate page. You can put all separate source galleries on a single page and link to them using their Section IDs or Section Anchor IDs (if you use a Gallery section) or Block IDs (if you use a Gallery block). For more details, you can refer to this post about IDs configuration.

Lire la suite →

Beyondspace 

As a Squarespace Circle member, Beyondspace delivers plugins that elevate your website, streamline workflows, and optimize the Editor experience—saving time and driving engagement.

https://beyondspace.studio

Précédent

Précédent

## How to upload files to Squarespace root directory

Suivant

Suivant

## Elevating Dynamic Galleries with Lightboxify URLs