Squarespace Custom Lightbox

How the Squarespace Lightbox Works

The lightbox activates when a visitor clicks an image that has lightbox enabled. Squarespace creates a full-screen overlay with the image centered, a dark semi-transparent background, navigation arrows (in multi-image galleries), a close button, and an optional caption below the image. The visitor can navigate between images, close the lightbox, or click outside the image to dismiss it.

To enable lightbox on an image block, click the image in the editor, open its settings, and set the click action to "Open in Lightbox." For gallery blocks, lightbox is typically enabled by default in the gallery design settings.

Customizing Lightbox Appearance with CSS

Changing the Background Overlay

The default lightbox background is a dark semi-transparent overlay. Customize its color and opacity with CSS targeting the lightbox container. For a darker, more dramatic background:

.sqs-lightbox-slideshow .sqs-lightbox-slideshow-slide-wrap { background-color: rgba(0, 0, 0, 0.95); }

For a lighter or colored background, change the RGBA values. A white background works well for product photography where you want the image to feel like a studio shot. A branded color creates a unique gallery experience. For design strategies, our Squarespace design tips guide covers color and visual consistency.

Styling Lightbox Captions

Lightbox captions display below the image and use the template's default font styling. Customize the font, size, color, and alignment with CSS:

.sqs-lightbox-slideshow .sqs-lightbox-meta { font-size: 14px; color: #cccccc; text-align: center; font-style: italic; letter-spacing: 1px; }

Customizing Navigation Arrows

The lightbox navigation arrows appear on the left and right sides of the image. Customize their size, color, and hover behavior:

.sqs-lightbox-slideshow .sqs-lightbox-slideshow-nav { color: #ffffff; font-size: 24px; opacity: 0.7; transition: opacity 0.3s ease; } .sqs-lightbox-slideshow .sqs-lightbox-slideshow-nav:hover { opacity: 1; }

Styling the Close Button

The close button (X) in the top corner of the lightbox can be resized, repositioned, and recolored. Target the close button element and adjust its styling to match your brand. A larger, more visible close button improves usability - especially on mobile where the default button can be small and hard to tap.

Adding Transition Effects

The default lightbox transition is a simple fade. Add CSS transitions to create smoother or more dynamic opening and closing effects. Use the transition property on the lightbox container for fade timing, or add transform properties for scale or slide effects. For CSS implementation details, our guide to adding custom CSS to Squarespace covers transitions and animations.

Advanced Lightbox Customization

Lightbox Image Border and Shadow

Add a border or box shadow to the lightbox image for a framed gallery effect:

.sqs-lightbox-slideshow img { border: 3px solid #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }

Lightbox Image Maximum Size

Control the maximum display size of lightbox images to prevent oversized images from filling the entire screen. Set a max-width and max-height on the lightbox image:

.sqs-lightbox-slideshow img { max-width: 90vw; max-height: 85vh; object-fit: contain; }

Custom Lightbox for Specific Galleries

To style the lightbox differently for different galleries, use the section ID as a parent selector. Each gallery section has a unique data-section-id that you can find in the browser's Inspect tool. Target that section's lightbox elements specifically without affecting other galleries on your site.

Lightbox Alternatives for Squarespace

Using JavaScript Lightbox Libraries

For more advanced lightbox functionality - zooming, panning, thumbnail strips, video support, or slideshow autoplay - you can replace Squarespace's default lightbox with a JavaScript library like GLightbox, Fancybox, or PhotoSwipe. Load the library through Code Injection and initialize it to target your gallery images.

This approach gives you full control over every lightbox behavior but requires a Business plan for Code Injection access and JavaScript knowledge to implement. For script implementation, our guide to adding custom code to Squarespace covers Code Injection setup and JavaScript best practices.

Disabling Lightbox Entirely

If you want clicks on gallery images to navigate to a separate page (like a project detail page) instead of opening a lightbox, disable lightbox in the gallery block settings and configure each image's click-through URL instead. This approach works well for portfolio sites where each project has its own dedicated page.

Lightbox Mobile Considerations

The lightbox experience differs significantly on mobile. Navigation arrows become swipe gestures. The close button needs to be large enough for finger tapping. Images need to fit within the mobile viewport without requiring pinch-to-zoom. Test your lightbox customizations on actual phones - especially the close button size and caption readability.

Add mobile-specific CSS rules to adjust lightbox styling at mobile breakpoints. Increase the close button size, simplify captions, and ensure the background overlay covers the entire screen including browser chrome. For mobile optimization strategies, our guide to Squarespace mobile optimization covers responsive design for interactive elements.

Lightbox Best Practices

Use lightbox for high-resolution content. Lightbox works best for photography, portfolio work, and product images where visitors benefit from seeing the full-resolution version. Do not enable lightbox on decorative images or icons that do not improve at larger size.

Add captions for context. Lightbox captions provide context that the thumbnail alone cannot. For photography portfolios, include the project name and medium. For product galleries, include the product name and key specs. For event galleries, include the date and venue.

Keep the background dark. Dark backgrounds create the best viewing experience for images because they eliminate distracting page content and reduce eye strain. Unless you have a specific brand reason to use a light background, stick with dark overlays. For broader design guidance, our Squarespace SEO guide covers how visual engagement metrics affect search performance.

Test navigation on all devices. Arrow navigation on desktop, swipe navigation on mobile, keyboard navigation for accessibility - all three should work smoothly. If your CSS customizations break any of these, adjust your selectors to target only the visual properties without affecting the interactive behavior.

Make Your Lightbox Match Your Brand

The default Squarespace lightbox is functional but generic. A few CSS rules transform it into a branded viewing experience - darker backgrounds, styled captions, polished navigation, and smooth transitions. These customizations take minutes to implement and immediately improve how visitors experience your visual content.

Start with the background color and caption styling, then move to navigation arrows and transitions. Test on mobile, ensure the close button is easy to tap, and keep the focus on the images - the lightbox should enhance your content, not compete with it.