Lightbox Anything Plugin FAQs
Installation & Setup
Basic Setup
Standard Implementation
Add this code to your site's header via Settings > Advanced > Code Injection:
<!-- Plugin Lightbox -->
<link href="/s/plugin-lightbox.css" rel="stylesheet">
<script src="/s/plugin-lightbox.js"></script>
<script>pluginLightbox();</script>
<!-- end Plugin Lightbox -->
Why isn't the Lightbox plugin working after installation?
Complete this installation checklist:
Upload both files: plugin-lightbox.js and plugin-lightbox.css to your site's file manager
Add code injection: Settings > Advanced > Code Injection (Header section only)
Verify syntax: Use straight quotes, not curly quotes in your code
Publish your site: Changes won't work on unpublished sites
Clear cache: Test in incognito/private mode
Check console: Press F12 and look for JavaScript errors
Where should I add the code injection?
Add the plugin code injection to Settings > Advanced > Code Injection in the Header section. Make sure to include both the CSS link and JavaScript script tags exactly as shown in the instructions.
Gallery Integration
Common Use Cases
1. Basic Lightbox Link
Format: #lightbox_page-url_block-id
2. Gallery Integration
Enable lightbox for gallery with this function:
function enableLightboxForGallery(selector) {
[].slice.call(document.querySelectorAll(selector)).forEach(function(item) {
var img = item.querySelector("img"),
meta = item.querySelector(".meta"),
parent = img.parentNode,
link = document.createElement("a"),
href = "#lightbox_" + img.getAttribute("data-src");
link.setAttribute("data-fancybox", "product-item-gallery");
link.setAttribute("href", href);
parent.insertBefore(link, img);
link.setAttribute("style", "position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; display: block");
setTimeout(function() {
link.appendChild(img.cloneNode());
if (meta) link.setAttribute("data-caption", meta.innerHTML);
}, 1000);
});
}
3. Carousel Support
Enable lightbox for carousel/reel galleries:
function enableLightboxForReelGallery(container, itemSelector) {
container = container || ".gallery-reel";
itemSelector = itemSelector || ".gallery-reel-item";
[].slice.call(document.querySelectorAll(container)).forEach(function(gallery) {
const groupId = 'group' + gallery.getAttribute("data-section-id");
[...gallery.querySelectorAll(itemSelector)].forEach(item => {
const img = item.querySelector("img"),
caption = item.querySelector("figcaption"),
link = document.createElement("a");
img.parentNode.appendChild(link);
link.appendChild(img);
link.setAttribute("href", "#lightbox_" + img.getAttribute("data-src") + "?group=" + groupId);
if (caption) link.setAttribute("data-caption", caption.innerHTML);
});
});
}
How do I make lightboxes work with gallery images?
For individual gallery images:
Find your gallery block ID by inspecting the element
Create separate pages for each lightbox
Link using format:
#lightbox_/your-page-url
For automatic gallery lightboxes:
<script>
pluginLightbox({
'selector': '.gallery-item img, .sqs-gallery-design-stacked img'
});
</script>
Why is my lightbox content appearing blank or empty?
Common causes and fixes:
Target page isn't published - Ensure your lightbox target page is live
Page contains problematic embeds - Remove or simplify complex embed codes
JavaScript conflicts - Temporarily disable other custom code to test
Improper URL format - Use
#lightbox_/page-urlformat exactlyPage permissions - Ensure target page isn't password protected
Customization
Styling Options
1. Remove Extra Padding
.c-lightbox .content-wrapper,
.c-lightbox .content,
.c-lightbox .page-section {
padding: 0 !important;
min-width: 100%;
}
2. Custom Width
@media (min-width: 1200px) {
html .c-lightbox__content {
max-width: 1000px;
}
}
3. Mobile Padding
@media (max-width: 768px) {
html .c-lightbox__slide {
padding: 20px;
}
}
4. Side-Aligned Lightbox
Right-aligned lightbox:
.c-lightbox__slide {
padding: 0 !important;
text-align: right;
}
.c-lightbox__content {
max-width: 100%;
}
.c-lightbox__content-inner {
min-height: 100vh;
}
@media (min-width: 641px) {
.c-lightbox__content {
max-width: 50%;
}
}
5. Custom Background
html .c-lightbox__content-inner {
background: #ecebdf !important;
}
6. Custom Overlay
[id="lightbox_your-page-url"] .c-lightbox__overlay {
background: rgb(163 134 101 / 53%) !important;
}
7. Caption Styling
.c-lightbox__caption {
padding: 0 17px 50px !important;
}
.c-lightbox__caption p {
line-height: 1.4;
transform: none !important;
}
How do I control the size of the lightbox?
Add custom CSS targeting the lightbox content:
/* Desktop sizing */
@media (min-width: 768px) {
html .c-lightbox__content {
max-width: 80%;
max-height: 90vh;
}
}
/* Mobile sizing */
@media (max-width: 767px) {
html .c-lightbox__content {
max-width: 95%;
max-height: 95vh;
margin: 2.5% auto;
}
}
How to change the lightbox width
Video Tutorial: Changing Lightbox Width
Note: The height of the lightbox is determined by the content.
How do I remove unwanted margins or spacing in my lightbox?
Use this CSS to eliminate spacing:
html .c-lightbox__content-inner {
padding: 0 !important;
margin: 0 !important;
}
/* Also remove spacing from the target page */
#your-lightbox-page .sqs-block {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
How do I customize the lightbox appearance (background, borders, etc.)?
Style the overlay and content container:
/* Background overlay */
html .c-lightbox__overlay {
background: rgba(0,0,0,0.9) !important;
}
/* Content styling */
html .c-lightbox__content-inner {
border-radius: 10px !important;
border: 2px solid #fff !important;
box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
}
/* Remove default borders */
html .c-lightbox__content {
border: none !important;
box-shadow: none !important;
}
How to make the lightbox display at the bottom rather than center
Add this code to Code Injection after the plugin code:
<!-- Lightbox Bottom Position -->
<style>
.c-lightbox__dialog {
align-items: flex-end;
padding-bottom: 10px;
}
.c-lightbox__dialog::after {
display: none;
}
.c-lightbox__content {
transform-origin: bottom;
}
</style>
Mobile & Compatibility
Why doesn't the Lightbox plugin work on mobile devices, especially Android?
Mobile browsers handle lightboxes differently:
Touch interface limitations - Some Android browsers redirect instead of opening lightbox
Browser settings - Users may have JavaScript disabled or popup blockers
Performance issues - Heavy content may not load properly on mobile
Solutions:
Test on multiple devices and browsers
Optimize lightbox content for mobile
Add touch-friendly CSS:
@media (max-width: 767px) {
.lightbox-trigger {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
}
Which browsers are fully compatible?
Full compatibility: Chrome, Firefox, Safari (latest versions)
Limited compatibility: Internet Explorer, older mobile browsers
Best practices:
Always test on target browsers
Provide fallback options for unsupported browsers
Consider progressive enhancement approaches
Is this plugin compatible with both Squarespace 7.0 and 7.1?
Plugin compatibility varies by version. Most modern plugins support Squarespace 7.1. If you're migrating from 7.0 to 7.1, you may need to update your implementation or get the latest version of the plugin.
Disable Lightbox Plugin on Mobile
To disable the lightbox plugin on mobile, add this code before the plugin code:
<!-- Disable Lightbox Plugin on Mobile -->
<script>
function resetLightboxLinks(){
[].slice.call(document.querySelectorAll('a[href^="#lightbox_"]')).forEach((function(l){
var href=l.getAttribute("href");
-1!==href.indexOf("#block")?l.removeAttribute("href"):l.setAttribute("href",href.replace("#lightbox_",""))
}))
}
setTimeout(function () {
if (Y.UA.mobile) {
resetLightboxLinks();
} else {
pluginLightbox();
}
}, 1000);
</script>
<!-- end Disable Lightbox Plugin on Mobile -->
Advanced Usage
Can I use multiple lightboxes on the same page?
Yes, you can create multiple lightboxes by linking to different pages or sections. Each link should have a unique #lightbox_ target. You can link to different pages like #lightbox_/page1, #lightbox_/page2, etc.
Can the lightbox work with embedded forms or interactive content?
Limited support for complex content:
✅ Works well: Static content, images, simple HTML, basic forms
⚠️ May have issues: Complex embeds, third-party widgets, heavy JavaScript
❌ Avoid: Auto-playing videos, complex animations, multiple iframes
Best practices:
Create simplified versions of interactive content for lightbox use
Test thoroughly before going live
Have fallback options for complex content
How do I troubleshoot lightboxes with forms or dynamic content?
Step-by-step debugging:
Test the target page directly - Does it work outside the lightbox?
Check browser console - Look for JavaScript errors
Simplify content - Remove elements one by one to isolate issues
Test in incognito mode - Rule out browser extensions/cache
Try a basic test page - Create a simple lightbox to verify plugin works
Form embed not showing up in lightbox
Try embedding the form as an iframe code block instead.
Jotform example: Getting the form iframe code
Open Lightbox On Hover
To open a lightbox on hover instead of click, add this code before the plugin code:
<!-- Open Lightbox On Hover -->
<script src="https://cdn.jsdelivr.net/npm/hoverintent@2/dist/hoverintent.min.js"></script>
<script>
function openLightboxOnHover() {
var links = [].slice.call(document.querySelectorAll('a[href^="#lightbox"]'));
links.map(function(link) {
hoverintent(link, link.click )
});
}
document.addEventListener('DOMContentLoaded', openLightboxOnHover);
window.addEventListener('mercury:load', openLightboxOnHover);
</script>
<!-- end Open Lightbox On Hover -->
Open Summary Links in Lightbox
Use this code to automatically convert summary block links to lightbox links:
<!-- Lightbox Plugin - Open Summary Links in Lightbox -->
<script>
function openBundleLinksInLightbox(linksSelector,id,group){
var linksArr=linksSelector.split(",");
id=id||"",linksArr=linksArr.map((function(linkSelector){
return id+" "+linkSelector+":not(.lightbox-link)"
})),[].slice.call(document.querySelectorAll(linksArr.join(","))).forEach((function(link){
link.setAttribute("href","#lightbox_"+link.getAttribute("href")+(group?"?group="+group:""))
}))
}
document.addEventListener('DOMContentLoaded', function(){
openBundleLinksInLightbox('.summary-title[href]:not(.lightbox-link),.summary-title-link[href]:not(.lightbox-link),.summary-read-more-link[href]:not(.lightbox-link),.summary-thumbnail-container[href]:not(.lightbox-link)');
});
</script>
<style>
.summary-read-more-link.lightbox-link {
pointer-events: none;
}
</style>
<!-- end Lightbox Plugin - Open Summary Links in Lightbox -->
Troubleshooting
Why did my lightbox stop working after a Squarespace update?
Squarespace updates can affect plugins:
Check file uploads - Re-upload plugin files if necessary
Verify code injection - Ensure it wasn't modified during update
Clear all caches - Browser, CDN, and Squarespace cache
Test basic functionality - Try a simple lightbox to isolate issues
Contact plugin support - You may need an updated version
The lightbox works sometimes but not others. What's causing inconsistency?
Common intermittent issues:
Cache conflicts - Clear browser and site cache
JavaScript conflicts - Other plugins or custom code interfering
Loading timing - Plugin loading before page elements
Browser memory - Heavy content causing performance issues
Debug steps:
Test consistently in incognito mode
Temporarily disable other plugins
Check console for errors during failures
Monitor performance during testing
Common Errors
Check the browser console for JavaScript errors and verify all files are properly uploaded and linked.
Additional Resources
Promo Add On
Old 7.0 Setup
For additional support, check your browser's developer console for error messages and ensure all plugin files are properly uploaded and linked.
