How to create hidden lightbox gallery on Squarespace
Update Notice: If you're seeking a more efficient way to organize hidden lightbox galleries on your page, check out our tutorial on creating dynamic lightbox galleries using Lightboxify URLs. This method allows for custom grids with separate image blocks in various aspect ratio, offering greater flexibility. Unlike the method below, which requires all images to maintain the same aspect ratio, leveraging Lightboxify URLs provide the ability to bypass this limitation.
By default, Squarespace displays an enlarged version of a gallery image when clicked, revealing all images within the gallery on the page. However, there are instances when you prefer the lightbox images to remain hidden, with only the initial gallery image visible. In this scenario, the remainder of the gallery would be accessible exclusively through the Lightbox gallery feature.
Well, this kind of hidden lightbox gallery set up is possible with Lightbox Studio - Premium Squarespace gallery plugin, letโs explore in this post!
Prequisites
First you need to purchase and activate Lightbox Studio on your page
Second, insert a Gallery block: Slideshow layout and enable Squarespace lightbox for the Slideshow
Tips: you can insert Gallery block on 7.1 and use Existing Gallery feature with Classic Gallery block - Squarespace gallery plugin to unlock Gallery block on 7.1 template
Tweaking the Slideshow
Assume you already have a Slideshow block with lightbox enabled, letโs turn it into single image by making these settings are unchecked
Go to Gallery block Settings -> Design
Uncheck Show next and Previous Controls
Uncheck Automatically Transition Between Slides
Uncheck Show Thumbnails
Slideshow block settings
And thatโs it! You can preview these kind of dynamic galleries below by click on these images, the rest of the gallery will be enlarged and displayed on a Lightbox gallery
Alternate method
You can also achieve a similar hidden gallery effect using Lightboxify URLs. This method utilizes links to insert hidden galleries into each Gallery slide, simplifying styling and customization. Check out Lightboxify URLs for more details.
FAQs
Question: What is a Squarespace lightbox?
A Squarespace lightbox is a design feature that opens an image in a centered overlay when clicked, dimming the rest of the page. It provides visitors with an enlarged view of the image, allowing them to focus on the details. Clicking the "x" in the top corner closes the lightbox and returns the viewer to the page.
Lightbox can be enabled on Gallery blocks, image blocks and Gallery sections (7.1)
Question: Why do my slideshow galleries have different heights?
The height of Slideshow gallery blocks in Squarespace is determined by the widest image uploaded to the gallery. The block considers the widest image to be the one with the widest aspect ratio.
For consistent slideshow heights, it's recommended to ensure that all images within the gallery have the same aspect ratio. This can be achieved by resizing images to match the desired ratio before uploading them to the gallery.
If resizing images is not an option, you can use custom css to keep slideshow height equal across galleries
