zoooom
Zero-dependency pan/zoom image viewer. 25KB.
Install
npm install zoooom
// Two lines. That's it.
import Zoooom from 'zoooom';
new Zoooom('#container', { src: 'image.jpg' });
Or use a script tag — no bundler needed:
<script src="https://unpkg.com/zoooom/dist/zoooom.iife.global.js"></script>
<script>new Zoooom('#el', { src: 'photo.jpg' });</script>
Features
Cursor-targeted zoom
Zooms toward the point under your cursor, not the image center. The coordinate math keeps the targeted pixel stationary at every scale.
Trackpad detection
Distinguishes trackpad from mouse wheel via delta magnitude. Continuous exponential zoom for trackpads, discrete steps for wheels.
Pinch center tracking
Two-finger zoom pivots around the actual midpoint between your fingers, recalculated each frame.
Auto max-scale
Calculates maximum zoom from the image's native resolution vs displayed size. No arbitrary limits.
Momentum
Pan release carries velocity with configurable damping. Respects prefers-reduced-motion.
Keyboard + accessibility
Arrow keys, +/-, R to reset. ARIA labels, 44px touch targets, reduced motion support.
Image preloading
Full-resolution preload with loading spinner and fade-in. Error callbacks on failure.
Joystick plugin
Optional virtual joystick with 8-direction panning, split-circle zoom, dwell activation, and screen reader support.
Input methods
| Method | Action |
|---|---|
| Mouse drag | Pan |
| Scroll wheel | Zoom toward cursor |
| Trackpad | Continuous zoom toward cursor |
| Ctrl+wheel | Pinch gesture (Windows/Linux) |
| Safari gestures | Native gesture zoom |
| Single touch | Pan |
| Two-finger pinch | Zoom with center tracking |
| Arrow keys | Pan with momentum |
| +/− keys | Zoom in/out |
| R key | Reset view |
| Joystick (plugin) | 8-direction pan + zoom |