# Gallery lightbox (`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. | | | |---|---| | Tag | Showcase | | Size | 2.6 KB gzipped own code (JS 1.6 KB + CSS 1.1 KB; 6.5 KB raw) | | Dependency | none (vanilla + native APIs) | | Best for | Salons, nails, barbers, remodelers, landscapers, restaurants: any business with 4-8 sharp work photos | | Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/lightbox/) | ## 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. ## Relation to the effects libraries Batch 2 photo-zoom (GSAP Flip) zooms one photo; this is the vanilla multi-photo viewer with swipe. ## Use it Copy this folder to the site as `/wbl/lightbox/` (keep `vendor/` if there is one), then: ```html
``` Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`, `--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the one-line bridge to the preview builder's `--a / --ink / --bg …`). ## License Our code: WBL-owned, original. No third-party code.