Gallery lightbox

An editorial gallery (one lead photo + supporting crops, captions) that opens into a full-screen viewer you swipe through, with arrows, keys, a counter and the caption.

Recent work

Colour going on: foils and a glaze
Red bob, cut dry
Copper lengths, combed out
Purple-blue fade
The floor on Sunset
Nude nails, short square

Tap a photo, then swipe (or ←/→, Esc). Pexels placeholders: on a client site, their own work photos only.

How to use it

Size

2.6 KB gzipped own code (JS 1.6 KB + CSS 1.1 KB; 6.5 KB raw)

Dependency

none (vanilla + native APIs)

Tag

Showcase

Best for

Salons, nails, barbers, remodelers, landscapers, restaurants: any business with 4-8 sharp work photos

What it does

Each gallery link points at the full-size photo (works without JS). JS builds one native <dialog> per gallery with a CSS scroll-snap track: swipe and trackpad are the browser's own; buttons and arrow keys step one photo; Esc, the × or a tap beside the photo closes; focus goes back to the photo you opened. Full-size images load lazily inside the viewer.

When to use

The work-photos section with specific captions (skill rule: editorial, not an even grid dump).

Pair with Blur-up loading on the grid.

Don't

Blurry phone photos (they look worse big): leave them small or out.

Fewer than 4 photos; a lightbox on a single image.

Captions that only exist inside the viewer.

Reduced motion, no JS, accessibility

Reduced motion: no fade/scale on open, arrows jump.

No JS: links open the full image.

Native modal dialog (focus trapped, Esc closes, background inert), labelled buttons, live counter.

Copy-ready snippet

<!-- Gallery lightbox (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/lightbox/module.css">
<script src="/wbl/lightbox/module.js" defer></script>

<!-- markup: -->
<div class="wbl-lb" data-wbl="lightbox" data-label="Work photos">
  <ul class="wbl-lb-grid">
    <li><a href="../_demo/img/color-apply.jpg" data-caption="Colour going on: foils and a glaze"><img src="../_demo/img/color-apply-640.jpg" width="640" height="427" loading="lazy" decoding="async" alt="Stylist painting colour onto foils"></a><span class="wbl-lb-cap">Colour going on: foils and a glaze</span></li>
    <li><a href="../_demo/img/result-bob.jpg" data-caption="Red bob, cut dry"><img src="../_demo/img/result-bob-640.jpg" width="640" height="427" loading="lazy" decoding="async" alt="Client with a red bob"></a><span class="wbl-lb-cap">Red bob, cut dry</span></li>
    <li><a href="../_demo/img/comb-red.jpg" data-caption="Copper lengths, combed out"><img src="../_demo/img/comb-red-640.jpg" width="640" height="427" loading="lazy" decoding="async" alt="Comb through copper hair"></a><span class="wbl-lb-cap">Copper lengths, combed out</span></li>
    <li><a href="../_demo/img/color-cut.jpg" data-caption="Purple-blue fade"><img src="../_demo/img/color-cut-640.jpg" width="640" height="427" loading="lazy" decoding="async" alt="Short cut with a purple fade"></a><span class="wbl-lb-cap">Purple-blue fade</span></li>
    <li><a href="../_demo/img/salon-floor.jpg" data-caption="The floor on Sunset"><img src="../_demo/img/salon-floor-640.jpg" width="640" height="427" loading="lazy" decoding="async" alt="The salon floor with chairs"></a><span class="wbl-lb-cap">The floor on Sunset</span></li>
    <li><a href="../_demo/img/nails.jpg" data-caption="Nude nails, short square"><img src="../_demo/img/nails-640.jpg" width="640" height="427" loading="lazy" decoding="async" alt="Short nude manicure"></a><span class="wbl-lb-cap">Nude nails, short square</span></li>
  </ul>
</div>