# How To Connect Squarespace Block Lightboxes **Source:** https://beyondspace.studio/blog/how-to-connect-squarespace-block-lightboxes **Language:** French (France) --- # How to connect Squarespace block Lightboxes Nov 16 Written By Beyondspace Are you tired of the limitations posed by traditional Squarespace lightbox galleries? Picture this: you meticulously design each page of your website using individual image blocks, carefully crafting the layout to showcase your work in the best possible light. But there's a catch – once your visitors click on an image to open the lightbox, there's built-in navigation to seamlessly transition between images. Each block stands alone, leaving your visitors to navigate back and forth, disrupting their browsing experience. That is when Lightbox Studio come to rescue, we have built-in option ***Connect Block Lightbox*** that can help you achieve exactly that, there are 3 options available: disabled, section and page. Let’s dive in ## Available options ### 1. disabled In the default mode, ConnectBlockLightbox keeps things simple. It replaces the regular lightbox galleries on your page with the Lightbox Studio features. Each image block gets its own little lightbox, so browsing is a breeze. ### 2. section With the ***section*** mode, you can group all your blocks within a section into one single lightbox gallery. It help connecting individual Image Blocks (and Gallery blocks) to make a continuous lightbox navigation from self built grid. So far this settings is available for 7.1 sections only For example, if you build a custom grid layout mixing: - 4 Image Blocks - 2 Slideshow Gallery Blocks They’ll all open together as a single lightbox. View fullsize ![connect lightbox section.png](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1709375417021-CQ9BSH591TAMMCC4IDR9/connect+lightbox+section.png)![connect lightbox section.png]() View fullsize ### 3. page In ***page*** mode, Connect Lightbox combines all your lightbox-enabled blocks and sections into a single, seamless gallery. It's like flipping through a digital photo album – but way cooler! Check the example, where I combined 2 more images from a Section Grid gallery, make it total 10 slides in the lightbox gallery View fullsize ![connect lightbox page (1).png](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1709399316052-VVNL17XC6TXG5CCG483O/connect+lightbox+page+%281%29.png)![connect lightbox page (1).png]() View fullsize ### How to Enable Connect Block Lightboxes 1. **Install or update** your Lightbox Studio plugin to the latest version. 2. Dans le Live Playground, find the “Extras” tab. 3. Enable **“Connect Block Lightboxes”** and select the scope that fits your layout: *Disabled, Section, or Page.* 4. Copy the generated snippet from the Code tab. 5. Replace it with the current Lightbox Studio snippet in your **Footer Code Injection** (in Squarespace: Website → Pages → Custom Code → Code Injection). 6. Save changes and preview your site. ### Bonus: Slideshow Gallery Lightbox Support Have you wondered why a Slideshow Gallery block can have a lightbox enabled? That’s another feature Lightbox Studio supports out of the box. For more details on how to achieve that, check out our dedicated guide: **How to enable lightbox for slideshow, carousel and stack gallery blocks** ## Important Update: Fluid Engine Block Order A recent Squarespace update changed how Fluid Engine calculates the **DOM (document) order** of blocks. In the past, Lightbox Studio followed the **insertion order** of blocks — meaning whichever image you added first would appear first in the lightbox. Now, Squarespace restructured the block hierarchy for accessibility (screen readers), and this affects plugin behavior too. Here’s what’s happening: - The **mobile layout view** determines your page’s *true block order* in the background code (HTML). - Even if you rearrange your blocks visually on desktop, Squarespace adopts the mobile order for accessibility — and that’s what Lightbox Studio uses. > “Tip: This same underlying order helps maintain accessibility consistency across devices. By adjusting your layout in mobile view, you’ll not only fix gallery order but also improve navigation flow for visually impaired visitors using assistive tools.” ### How to Fix Lightbox Order Issues If your connected Lightbox gallery appears out of order: 1. Switch to **mobile view** in the Squarespace editor. 2. Rearrange your blocks in the correct sequence. 3. Save and republish your page. This step ensures Lightbox Studio — and screen readers — follow the proper image sequence. The short demo video below showing how block order works in Fluid Engine and how to adjust it for Lightbox Studio. ## Conclusion The ability to connect lightboxes across sections or pages has always been one of the most flexible perks of Lightbox Studio. With the recent Squarespace update, understanding how **Fluid Engine reorders your blocks** ensures this feature continues to work seamlessly. Take a few extra seconds to check your layout in mobile view — it's now key to getting both accessibility and design consistency right. 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 ## Top 10 Squarespace Plugins for Enhancing Your Design Suivant Suivant ## Generate QR Codes for your website quickly