How to Add a Lightbox in Squarespace

A Squarespace lightbox lets visitors click a thumbnail and see the bigger picture without leaving the page. It’s clean, focused, and great for portfolios, product shots, and moodboards. You can get there two ways: use Squarespace’s built‑in image and gallery behavior, or add a small custom pattern when you want buttons and text links to open a modal. We’ll cover both, plus accessibility and performance so your site stays fast and friendly.

If you plan to style captions beyond the basics, see our notes in Custom CSS here: practical caption styling. Want a form or signup in a modal instead of an image? We touch on that approach below and in pop‑up and modal patterns. If you’re linking within the same page (jump links inside or outside a modal), bookmark anchor links that don’t fight your header.

Overview

There are two common cases:

• Native images/galleries: Use Image Blocks or Gallery Sections. Squarespace already provides a lightbox-style viewer on click.
• CTAs and text links: If you want a button that opens an image, video, or HTML content in a modal, add a minimal custom pattern.

Here’s the quick map:

Helpful references: Squarespace’s docs on image best practices and Gallery sections.

Turn any image into a lightbox with MicroEdits

Editing templates and code is fine—until it isn’t. If you just want things to work, MicroEdits is the shortest path. Describe what you want in plain English and it transforms your existing Squarespace site: turn any image into a lightbox, make a gallery open with captions, or have a button open a modal with a video or a booking widget. No coding. No copying and pasting. Instant preview, instant apply.

Try prompts like:

• When someone clicks the team photos on /about, open a lightbox with a subtle fade and show the caption below the image.

• Turn the “View details” buttons in the portfolio into modals that show a larger image and a short description.

• Open our Calendly inline booking in a modal when the “Book now” button is clicked.

• Use the site’s existing fonts and colors inside the lightbox; keep the ESC key to close.

Why people like it:

• No coding required.
• Works on any website/platform, including Squarespace.
• Preview and share changes first, then apply instantly. Easy to revert.
• It just works—you describe the change; MicroEdits handles the rest.

Image and gallery blocks

Squarespace already does most of the heavy lifting for a “lightbox gallery Squarespace.” Use this when your triggers are images or galleries.

Steps for Image Blocks (7.1):

1. Add an Image Block.
2. In the block settings, enable the option to open the image on click. Depending on your template, this appears as either:
   • “Open in Lightbox,” or
   • Set “Clickthrough URL” → “File” (and upload the same image). This opens the image in Squarespace’s built‑in viewer.
3. Add a caption (overlay or below) in the block’s Content tab.
4. Adjust aspect ratio and cropping so the grid looks even.

Steps for Gallery Sections (Slideshow, Carousel, Grid):

1. Add a Gallery Section to your page.
2. Choose a layout (Grid, Slideshow, Carousel). For an “image slider Squarespace,” pick Slideshow/Carousel.
3. Turn on the setting to open the image on click (varies by layout; usually under “Design” or “Settings”).
4. Set caption style (overlay or below) and spacing.
5. Keep images consistent in size. Squarespace’s responsive loader helps, but start with good source images.

Fluid Engine (7.1) placement notes:

• Stacking order: If clickable images sit behind overlapping content, nudge their layer forward. In Fluid Engine, adjust the arrangement so the image isn’t obstructed.
• Spacing: Avoid cramming; give thumbnails breathing room to reduce mis‑taps on mobile.

Squarespace references: Gallery sections and image best practices.

Tip: For deeper caption styling (weights, alignment, letter‑spacing), see custom CSS for captions.

Custom lightbox for CTAs

When you want a button or text link to open an image or content in a modal, use a minimal pattern. It’s small, theme‑friendly, and accessible.

What you’ll add:

• A link that points to an image URL or an on‑page content container.
• A few lines of CSS for the overlay.
• A tiny script (added via Code Injection → Footer) to open/close the modal, trap focus, and close on ESC.

1. Add trigger(s) via a Code Block

<!-- Image trigger -->
<a
  class="btn lbx-trigger"
  data-lbx="image"
  href="https://your-site.com/path/to/image.jpg"
  >View image</a
>

<!-- HTML trigger + hidden content (form, embed, etc.) -->
<a class="btn lbx-trigger" data-lbx="html" href="#contact-form"
  >Open contact form</a
>
<div id="contact-form" class="lbx-hidden">
  <!-- Place a Squarespace Form Block or an embed like Calendly/Map here -->
</div>

2. Add CSS (Design → Custom CSS)

.lbx-mask {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: clamp(16px, 5vw, 48px);
  z-index: 9999;
}
.lbx-modal {
  background: var(--lbx-bg, #fff);
  color: var(--lbx-fg, #111);
  border-radius: 10px;
  max-width: min(1000px, 92vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font: inherit;
  line-height: 1.5;
  position: relative;
}
.lbx-modal img,
.lbx-modal video,
.lbx-modal iframe {
  width: 100%;
  height: auto;
  display: block;
}
.lbx-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
  color: inherit;
}
.lbx-hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lbx-mask,
  .lbx-modal {
    animation: none;
    transition: none;
  }
}

3. Add the JavaScript (Settings → Advanced → Code Injection → Footer)

(function () {
  const focusableSel =
    'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])';

  function openLbx(trigger) {
    const type = trigger.getAttribute("data-lbx");
    const href = trigger.getAttribute("href");
    const prevFocus = document.activeElement;

    const mask = document.createElement("div");
    mask.className = "lbx-mask";
    const modal = document.createElement("div");
    modal.className = "lbx-modal";
    modal.setAttribute("role", "dialog");
    modal.setAttribute("aria-modal", "true");
    const closeBtn = document.createElement("button");
    closeBtn.className = "lbx-close";
    closeBtn.setAttribute("aria-label", "Close");
    closeBtn.textContent = "×";

    let content;
    if (type === "image") {
      content = document.createElement("img");
      content.src = href;
      content.alt =
        trigger.getAttribute("aria-label") || trigger.textContent || "";
    } else {
      const target = document.querySelector(href);
      content = target ? target.cloneNode(true) : document.createElement("div");
      if (content) content.classList.remove("lbx-hidden");
    }

    modal.appendChild(closeBtn);
    if (content) modal.appendChild(content);
    mask.appendChild(modal);
    document.body.appendChild(mask);

    const restore = () => {
      document.body.removeChild(mask);
      document.documentElement.style.overflow = "";
      prevFocus && prevFocus.focus();
      document.removeEventListener("keydown", onKey);
    };
    const onKey = (e) => {
      if (e.key === "Escape") restore();
      if (e.key === "Tab") {
        const f = modal.querySelectorAll(focusableSel);
        if (!f.length) return;
        const first = f[0],
          last = f[f.length - 1];
        if (e.shiftKey && document.activeElement === first) {
          last.focus();
          e.preventDefault();
        } else if (!e.shiftKey && document.activeElement === last) {
          first.focus();
          e.preventDefault();
        }
      }
    };

    mask.addEventListener("click", (e) => {
      if (e.target === mask) restore();
    });
    closeBtn.addEventListener("click", restore);
    document.addEventListener("keydown", onKey);

    document.documentElement.style.overflow = "hidden";
    modal.setAttribute("tabindex", "-1");
    modal.focus();
  }

  document.addEventListener("click", (e) => {
    const t = e.target.closest(".lbx-trigger[data-lbx]");
    if (!t) return;
    e.preventDefault();
    openLbx(t);
  });
})();

Accessibility notes:

• The script traps focus inside the modal and closes on ESC.
• Click outside closes the modal.
• Images use the trigger’s text or aria‑label as alt text—add meaningful labels to your CTA.

Theme notes:

• Colors and fonts inherit from your site. Tweak --lbx-bg and --lbx-fg in CSS if needed.
• If other sections overlap the modal in Fluid Engine, raise the overlay with z-index (already high in the snippet).

For forms/videos in a modal, also see modal considerations for forms.

Performance and UX

Lightboxes should feel instant and effortless.

• Keep images lean. Export at the displayed size plus a bit of headroom. Squarespace’s responsive loader helps, but source files still matter (image best practices).
• Lazy‑load thumbnails. Squarespace galleries do this; if you hand‑code images elsewhere, add loading hints.
• Respect motion settings. Use the prefers‑reduced‑motion media query to tone down transitions (MDN).
• Keyboard and screen readers. Ensure focus moves into the modal, TAB cycles within, and ESC closes. WAI‑ARIA’s dialog pattern is the gold standard (W3C APG).
• Captions and contrast. If captions overlay images, check contrast and readability. See caption styling tips.
• Sliders + lightbox. If you’re using a Slideshow/Carousel gallery, you can still open a lightbox on click for detail viewing.

FAQ

Can I have multiple lightbox galleries on one page?

Yes. Each Image Block and Gallery Section is independent, so multiple “squarespace lightbox” areas can coexist. If you build a custom modal for CTAs, scope triggers with a class (for example, .portfolio .lbx-trigger versus .press .lbx-trigger) so events don’t overlap. Keep filenames and captions organized so Alt text and labels stay accurate across galleries.

How do I style captions inside the lightbox?

With native Squarespace viewers, use the block/section settings for caption position and style, then add fine‑tuning in Custom CSS. For example, adjust font weight, size, and spacing. We cover patterns in custom CSS for captions. If you’re using the custom modal, include caption text in the HTML content and style it with your body font and colors for consistency.

Can a button open a form or video in a lightbox popup Squarespace?

Yes. Use the custom modal pattern above and place a Form Block, YouTube/Vimeo embed, or a booking widget inside the hidden container. The script will clone and display it. For more on forms and timing (e.g., when to use a true pop‑up vs. a click‑triggered modal), see our pop‑up guide. Remember to ensure focus moves into the modal and ESC closes it.

What’s the difference between a lightbox and an image slider Squarespace?

A slider (Slideshow/Carousel) lets visitors browse thumbnails or slides inline. A lightbox opens a focused, larger view on top of the page. You can use both: a Gallery Section for the slider and “open in lightbox on click” for detail. Keep slide counts reasonable and images optimized so navigation stays smooth on mobile.

How do I keep the page fast when using large images?

Start with right‑sized source files and sensible compression; Squarespace will create responsive variants, but it can’t fix huge originals. Reuse images across pages so they stay cached. Prefer JPEG/WebP for photos and SVG/PNG for graphics. Avoid loading dozens of poster‑sized hero images in a single grid; paginate or break into sections if you have many items.

Is the native Squarespace viewer accessible?

Squarespace’s built‑in viewer handles basics like keyboard navigation and focus management. Still, always provide descriptive Alt text and readable captions. If you code your own modal, follow the ARIA dialog guidance, trap focus, and let ESC close. Respect prefers‑reduced‑motion and ensure sufficient color contrast.