Pinch & Scroll Zoom Image Viewer — Free Touch Pinch-Zoom Snippet

This viewer implements the actual pinch-to-zoom gesture you'd expect from a native photo app: two fingers on the glass, moving apart or together, scaling the image in real time — plus a mouse wheel equivalent for desktop and drag-to-pan once zoomed in. It's built in plain HTML, CSS, and vanilla JavaScript with no gesture library, tracking real touchstart/touchmove/touchend events and event.touches.

Finger-distance ratio, not a fake slider

When a second finger lands (e.touches.length === 2), the code records the starting distance between the two touch points with the Pythagorean theorem — Math.sqrt(dx*dx + dy*dy) — and the scale at that moment. On every subsequent touchmove, it recomputes the current distance and divides it by the starting distance: ratio = dist / pinch.startDist. Multiplying that ratio by the starting scale is the actual pinch math — fingers twice as far apart as when the gesture began means the image is scaled 2x from where it started. This is genuine two-finger tracking, not a decorative animation that plays regardless of finger movement.

Zooming toward a fixed point

Both the pinch and the wheel handler call a shared zoomAt(x, y, nextScale) that keeps whatever point is under the cursor (or the pinch midpoint) visually stationary as the scale changes. It does this by solving for the new translation: tx = px - (px - tx) * ratio, where ratio is the scale change. Without this, zooming would always scale around the image's top-left corner and the point you're actually pinching or scrolling over would drift away — the standard complaint with naive zoom implementations.

Wheel zoom on desktop

wheel events feed the same zoomAt function, converting deltaY into a small multiplicative scale change so scrolling up zooms in and down zooms out, at the cursor position — desktop users get the same "zoom toward what I'm pointing at" behavior touch users get from pinching.

Drag-to-pan and clamped bounds

Once scale > MIN_SCALE, both a single remaining touch and a mouse drag translate the image, with clampPan() constraining the translation so the image edges can never be dragged past the stage bounds — you can't pan into empty space. MIN_SCALE/MAX_SCALE similarly clamp every zoom operation (pinch, wheel, or the derived scale) so the image can neither shrink below its natural size nor blow up into a blurry mess.

Customizing it

Change MIN_SCALE/MAX_SCALE, swap the wheel sensitivity constant, or add double-tap-to-zoom by wiring a tap-timing check (see double-tap to like for that exact detection pattern) into a call to zoomAt. Pair it with an image magnifier for a hover-based alternative, or an image zoom card for a lighter-weight click-to-zoom.