Lightbox · gallery
Full-screen pictures that grow out of their thumbnails and shrink back into them — swipe or arrow between them, zoom with the wheel, a double-click or a pinch and drag around, a slideshow, a thumbnail strip, captions and download.
Click a picture · it grows out of the thumbnail · ← → or swipe · wheel, double-click or pinch to zoom · drag to look around · swipe down or Esc to close
Space plays a slideshow; the strip at the bottom jumps.
Usage
import { Lightbox, Gallery } from "./components/lightbox.js"; const pictures = [{ src: "/big/1.jpg", thumb: "/small/1.jpg", alt: "Fjords", caption: "Morning in the fjords" }, …];Gallery({ images: pictures, columns: 4, aspect: "4/3" }) // thumbnails that open it, and shrink it back const lb = Lightbox({ images: pictures, slideshow: 3500 }); // or open it yourselflb.open(2, thumbnailElement); // grows out of that element when given// ← → Home End · + − 0 zoom · Space slideshow · Esc · swipe, pinch, double-tap on touch