github.com/drkxbt/lightbox

lightbox

An image viewer where pictures grow out of their thumbnails, crop and all. Swipe between them, drag down to close, pinch or double-tap to zoom. Plain TypeScript, no dependencies. Tap any picture below.

npm install github:drkxbt/lightbox

A gallery

Square tiles, a wide one and a tall one. Each picture grows out of exactly the part its tile shows.

drk's penguin as a woodblock print, standing on a rock above big waves drk's penguin as a ninja with spiky yellow hair and the rainbow visor Animated 3D penguin with the flower crown, a glint sweeping across the rainbow visor drk's penguin as a riso-print sticker drk's penguin as a small claymation figure drk's penguin with red laser eyes drk's penguin drawn flat, on a sky-blue background

Big pictures, small thumbnails

These thumbnails are 640 pixels wide; the full screenshots are 2880. The thumbnail shows at once and the full image takes over when it has loaded. Zoom in to read the numbers.

The charts demo: a candle chart with volume, a price line and an order book depth chart The motion tour: an async button, a like, icons, tabs, a counter and a toast

On its own

drk's penguin drawn flat

An image with an empty data-lightbox opens by itself, with no counter or arrows. Round, square or cropped, it grows from its own shape.

In the viewer

Swipe, arrow keys
Next and previous
Drag down, Escape, Back
Close
Double-tap, pinch, click
Zoom in and out
Ctrl and scroll, trackpad pinch
Zoom at the pointer
Drag a zoomed image
Look around
Tap the picture on a phone
Hide the controls