Elevating Dynamic Galleries with Lightboxify URLs
By default, when clicking on a lightbox-enabled image, it typically opens as a single image in a continuous slideshow lightbox. However, Lightbox Studio introduces a notable feature: the capability to convert a single image into a dynamic lightbox gallery, each independent from the others. This is made possible by leveraging Lightboxify URLs.
Terminology
To provide clarity throughout the post, here are some key terms:
Source Gallery: This refers to the gallery content that will be displayed when an image is clicked.
Featured Image: This can be either an individual image or a slide within a gallery. When clicked, it triggers the opening of the source gallery in the lightbox.
Lightboxify URLs: These are URLs that, when used, convert image links into lightbox galleries
What are Lightboxify URLs?
Lightboxify URLs are normal URLs with a special parameter that transforms the lightbox behavior. They enable the creation of separate galleries within a lightbox, allowing users to view multiple images from a single click.
Format of Lightboxify URLs
To create a lightboxify Gallery, follow these steps:
Create a new page and insert a Gallery block or Gallery section to create a Source gallery
Grab the Gallery block ID (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).
The URL format will be:
/gallery?lightboxify=true#gallery_id.Insert the URL into the Image clickthrough URL of your gallery images.
Note to readers: If the Gallery ID isn’t available in the URL, Lightbox Studio will automatically use the first gallery block or section of the page
Where Lightboxify URLs Support
All clickthrough URLs can be modified to become Lightboxify URLs. You can insert clickthrough URLs into:
Gallery blocks
Gallery pages
Portfolio page Grid layouts (URLs to portfolio projects)
With the new update, Portfolio page Grid layouts now support opening portfolio projects in a lightbox, allowing users to view project galleries without leaving the main portfolio page.
It is recommended to enable Lightbox indicators in Lightbox Studio so users know that clicking on the current image will open a separate gallery.
Creating a Source Gallery
A Source gallery is used to store the gallery content, including images, video assets, and captions. Here’s how to set it up:
Choose a Gallery: You can use any Gallery block or Gallery section layouts to create a source gallery. However, it is recommended to use a Grid gallery block with lightbox enabled to ensure complete extraction of its content.
Compatibility: Gallery blocks are chosen for this tutorial to ensure compatibility with both Squarespace 7.0 and 7.1 templates.
What Includes in the Lightbox?
By default, the featured image will be included in the lightbox. Therefore, it is best to use the same image for both the featured image and the first image of the Source gallery. This ensures consistency and provides a seamless user experience when transitioning from the featured image to the full Source gallery.
Step-by-Step Guide
1. Create the Source Gallery:
1.1 Create a new page,
Create the source gallery page
1.2 Name it properly, for example: /source-gallery
Name the page
1.3 Insert Gallery blocks
Insert Gallery block
2. Create the Lightboxify URL
2.1 Use Chrome extension to grab the ID of the Gallery blocks
Create lightboxify URL
2.2 The Lightboxify will look like this: /source-gallery?lightboxify=true#block-yui_3_17_2_1_1716134815539_3510
Source gallery page: /source-gallery
Lightboxify url parameter: ?lightboxify=true
Target block ID: #block-yui_3_17_2_1_1716134815539_3510
Note to readers: You can either use Gallery block or Gallery section as Source gallery. If the Gallery ID isn’t available in the URL, Lightbox Studio will automatically use the first gallery block or section of the page.
3. Insert the Lightboxify URL to gallery
In this specific tutorial we will insert the URL to a Gallery block, other gallery layout will have different ways to append URLs to images
3.1 Open the page where you want to put the dynamic lightbox, for example: /home
Edit the page
3.2 Start editting the Gallery in page you opened
Edit the gallery
3.3 Edit image clickthrough
Save the edit
3.4 Put in the Lightboxify URL to the link input, then Save. Your gallery will looks like this
Different lightbox gallery created
Keep editing the clickthrough URLs for all Gallery slides until finish. Each source gallery will have unique ID so each slide will open a seperate lightbox gallery.
Below is the demostration video where each slide in a Grid gallery block is opening a seperate gallery when click, including the image itself
Another example, where different image blocks in various aspect ratio making a custom grid using Fluid engine are opening seperate lightbox galleries upon click
Frequently Asked Questions (FAQ)
Question: I can not insert a Gallery block on my 7.1 website?
If you can not find Gallery block in Block selector, use our plugin Classic Gallery block to unlock it
Question: Can I use Lightboxify URLs in a lightbox-enabled gallery?
No, currently you need to turn off the lightbox feature for the gallery. If you put Lightboxify URLs in a lightbox-enabled gallery, they will be treated as normal links.
Question: How to open a different lightbox gallery upon clicking the buttons
Clickthrough links can be inserted into buttons, so it is possible with lightboxify URLs, check the tutorial here How to open a gallery lightbox on button click
Question: Does each source gallery need to be on a separate page?
No, you can put all seperate source galleries on single (01) page, and link to them using their Section IDs (if you use Gallery section) or Block IDs (if you use Gallery block).
Question: Will Lightboxify URLs slow down my website?
In fact, no. It will do the contrary because the images will be loaded asynchronously. If you have many Lightboxify galleries in your content, consider putting all source galleries on the same page to optimize loading times
Question: What kind of content is supported by Lightboxify URLs?
Lightboxify URLs now support different type of content, including:
