TigerLightbox

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.

Install

Drop the two files in and reference them — that's it.

<link rel="stylesheet" href="tiger-lightbox.css">
<script src="tiger-lightbox.js" defer></script>

Or npm install tiger-lightbox.

Use it (attribute API)

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.).

<a href="photo-1-large.jpg" data-tiger-lightbox="portfolio" data-caption="Sunrise">
  <img src="photo-1-thumb.jpg" alt="Sunrise">
</a>
<a href="clip.mp4" data-tiger-lightbox="portfolio" data-type="video" data-caption="Reel">…</a>
<a href="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

Use it (JS API)

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();

Controls

• Keyboard: Esc close · ← / → 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.

Theming

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;
}

License

MIT © WebTigers