# How To Enable Lightbox For Slideshow Carousel And Stack Gallery Blocks
**Source:** https://beyondspace.studio/blog/how-to-enable-lightbox-for-slideshow-carousel-and-stack-gallery-blocks
**Language:** French (France)

---

# How to enable lightbox for Slideshow, Carousel and Stack Gallery blocks

Nov 22

Written By NL

By default, Squarespace users can only enable lightbox for their Gallery Grid blocks, while Slideshow, carousel, and stack gallery blocks don't support a lightbox, but with our plugin Lightbox Studio - Premium Squarespace lightbox plugin, it is possible to support lightbox for those type of galleries, let’s explore how

## How to enable Lightbox for Slideshow

If you add a Gallery block to your page, the Lightbox option and Lightbox theme will be available when a Grid gallery type is selected, but do you know the Lightbox settings **persist** even when you switch the gallery types!? We will take advantage of this feature in order to turn on/off for the galleries per-instance

Squarespace gallery lightbox settings

To achieve this, let’s follow this

- Purchase and Activate the Lightbox Studio plugin
- Add a Gallery block on your page or blog
- Switch its type to **Grid** and make sure the **Visionneuse**  checkbox is checked and the **Lightbox Theme** suits your need
- Press **Enregistrer** the page, so the lightbox settings of the block can be persisted
- Now you can switch the types of the block into whatever types you like, including: Slideshow, Carouse & Stacked
- Press **Enregistrer**  again

and that’s it, your your gallery blocks are now lightbox enabled! No more restriction on allowed gallery types for lightbox.

Step-by-step tutorial included

*15 STEPS*

1. After purchased and activated Lightbox Studio  
Start editing your **Galerie**

![Step 1 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=1&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

2. Select the **Bloc Galerie**

![Step 2 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=2&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

3. Click **Modifier**

![Step 3 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=3&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

4. Click **Design**

![Step 4 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=4&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

5. Switch Design to **Grid**

![Step 5 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=5&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

6. Ensure **Visionneuse**  option is checked

![Step 6 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=6&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

7. Click **Enregistrer**

![Step 7 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=7&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

8. After **Saved**, edit the **Gallery block** again

![Step 8 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=8&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

9. Click **Modifier**

![Step 9 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=9&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

10. Click **Design**

![Step 10 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=10&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

11. Switch to your previous Design, for example **Carrousel**

![Step 11 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=11&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

12. Click **Enregistrer**

![Step 12 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=12&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

13. Click **Exit**

![Step 13 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=13&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

14. Check **lightbox** on **Gallery block** by clicking the images

![Step 14 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=14&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

15. That's it. You're done.

![Step 15 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361837&step_number=15&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

### Here's an interactive tutorial

*\*\* Best experienced in Full Screen (click the icon in the top right corner before you begin) \*\**

https://www.iorad.com/player/2361837/Squarespace---How-to-enable-lightbox-for-Slideshow--Carousel-and-Stack-Gallery-with-Lightbox-Studio

**Next step**

## Clickthrough URL and lightbox

Let’s explore how the clickthrough URL work with the new Lightbox settings gallery blocks

| Block Layout | Clickthrough URL images | Lightbox caption |
| --- | --- | --- |
| Grid | - Clicking the image opens the lightbox instead of the URL.   - This is Squarespace default behavior. | - Supported |
| Carrousel | - Click the image open the URL. | - Supported |
| Slideshow | - Click the image open the URL. | - Supported |
| Stack | - Click the image open the URL. | - Supported: title or description is saved on the image as alt attribute |

You can preview all the supported galleries on this page

NL

am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, such as:

- Connect Google Spreadsheet dataset to Squarespace Google Maps or Datatables

- Implement SVG, CSS animations

- Inject custom code to display currency conversion based on geolocation

- Edit squarespace template file in Developer mode

--- To Space And Beyond! ---

Précédent

Précédent

## How to create hidden lightbox gallery on Squarespace

Suivant

Suivant

## How to add indicators on Squarespace lightboxes