A tiny, dependency-free lightbox & media viewer. ~5 KB, no jQuery, no build step, no image assets. Images, video, PDFs/iframes and embeds — with gallery navigation, keyboard, touch-swipe, focus-trap, and CSS-variable theming.
Part of the Tiger platform, broken out as a standalone drop-in.
Drop the two files in and reference them — that's it.
<linkrel="stylesheet" href="tiger-lightbox.css"><scriptsrc="tiger-lightbox.js" defer></script>Or npm install tiger-lightbox.
Give links a data-tiger-lightbox="<group>" — links sharing a group form one gallery. It
auto-wires via a delegated listener, so dynamically added elements work too (grids that
re-render, infinite scroll, etc.).
<ahref="photo-1-large.jpg" data-tiger-lightbox="portfolio" data-caption="Sunrise"><imgsrc="photo-1-thumb.jpg" alt="Sunrise"></a><ahref="clip.mp4" data-tiger-lightbox="portfolio" data-type="video" data-caption="Reel">…</a><ahref="brochure.pdf" data-tiger-lightbox="portfolio" data-type="pdf">…</a>Attributes:
| Attribute | Meaning |
|---|---|
data-tiger-lightbox | gallery group id (items sharing it navigate together) |
href / data-src | the full-size source (data-src wins) |
data-type | image | video | pdf | iframe (auto-detected from the src otherwise) |
data-caption / data-title | caption shown under the media |
TigerLightbox.open([{type: 'image',src: 'a-large.jpg',caption: 'A'},{type: 'video',src: 'b.mp4'},{type: 'pdf',src: 'c.pdf',caption: 'Spec sheet'}],0);TigerLightbox.close();- Keyboard:
Escclose ·←/→navigate. - Touch: swipe left/right to navigate, swipe down to close.
- Mouse: backdrop or ✕ to close, ‹ / › arrows to navigate.
- Accessible:
role="dialog",aria-modal, focus-trap, focus restored on close.
Override the --tlb-* custom properties (scope them wherever you like):
:root {
--tlb-bg:rgba(15,17,21,.92); /* backdrop */--tlb-fg:#fff; /* caption/counter */--tlb-ctrl:rgba(255,255,255,.82);
--tlb-ctrl-hover:#fff;
--tlb-radius:8px;
--tlb-max-w:92vw;
--tlb-max-h:82vh;
--tlb-z:2000;
}MIT © WebTigers