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

<div class="pz-wrap">
  <div class="pz-stage" id="pzStage">
    <div class="pz-canvas" id="pzCanvas">
      <img class="pz-img" id="pzImg" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=900&q=70&auto=format&fit=crop" alt="Mountain landscape" draggable="false">
    </div>
    <div class="pz-badge" id="pzBadge">100%</div>
  </div>
  <div class="pz-bar">
    <p class="pz-hint">Pinch with two fingers, scroll to zoom, or drag while zoomed in</p>
    <button type="button" class="pz-reset" id="pzReset">Reset zoom</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0c0f16;color:#e5e7eb;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}

.pz-wrap{width:100%;max-width:560px}
.pz-stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid #232838;background:#05070c;aspect-ratio:4/3;touch-action:none;cursor:grab}
.pz-stage.dragging{cursor:grabbing}
.pz-canvas{width:100%;height:100%;transform-origin:0 0;will-change:transform}
.pz-img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-select:none;pointer-events:none}
.pz-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;font-variant-numeric:tabular-nums}

.pz-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;flex-wrap:wrap}
.pz-hint{font-size:12px;color:#8b93a7;flex:1;min-width:200px}
.pz-reset{border:1px solid #2c3346;background:#161b28;color:#cbd3e6;font:700 12.5px system-ui;padding:9px 16px;border-radius:9px;cursor:pointer;white-space:nowrap}
.pz-reset:hover{background:#1e2536}

var stage = document.getElementById('pzStage');
var canvas = document.getElementById('pzCanvas');
var badge = document.getElementById('pzBadge');
var resetBtn = document.getElementById('pzReset');

var MIN_SCALE = 1, MAX_SCALE = 4;
var scale = 1, tx = 0, ty = 0;

function apply() {
  canvas.style.transform = 'translate(' + tx + 'px,' + ty + 'px) scale(' + scale + ')';
  badge.textContent = Math.round(scale * 100) + '%';
}

function clampPan() {
  var rect = stage.getBoundingClientRect();
  var maxX = 0, minX = -(rect.width * scale - rect.width);
  var maxY = 0, minY = -(rect.height * scale - rect.height);
  tx = Math.min(maxX, Math.max(minX, tx));
  ty = Math.min(maxY, Math.max(minY, ty));
}

function zoomAt(clientX, clientY, nextScale) {
  var rect = stage.getBoundingClientRect();
  var px = clientX - rect.left, py = clientY - rect.top;
  var clamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, nextScale));
  // Keep the point under the cursor/pinch-midpoint stationary while the scale changes.
  var ratio = clamped / scale;
  tx = px - (px - tx) * ratio;
  ty = py - (py - ty) * ratio;
  scale = clamped;
  if (scale === MIN_SCALE) { tx = 0; ty = 0; }
  clampPan();
  apply();
}

// --- Mouse wheel zoom (desktop) ---
stage.addEventListener('wheel', function (e) {
  e.preventDefault();
  var delta = -e.deltaY * 0.0016;
  zoomAt(e.clientX, e.clientY, scale * (1 + delta));
}, { passive: false });

// --- Drag to pan when zoomed in (mouse) ---
var dragging = false, lastX = 0, lastY = 0;
stage.addEventListener('mousedown', function (e) {
  if (scale <= MIN_SCALE) return;
  dragging = true;
  stage.classList.add('dragging');
  lastX = e.clientX; lastY = e.clientY;
});
window.addEventListener('mousemove', function (e) {
  if (!dragging) return;
  tx += e.clientX - lastX;
  ty += e.clientY - lastY;
  lastX = e.clientX; lastY = e.clientY;
  clampPan();
  apply();
});
window.addEventListener('mouseup', function () { dragging = false; stage.classList.remove('dragging'); });

// --- Real touch pinch-to-zoom + single-finger pan ---
var pinch = null; // { startDist, startScale, midX, midY }
var pan = null;   // { x, y }

function touchDist(t0, t1) {
  var dx = t0.clientX - t1.clientX, dy = t0.clientY - t1.clientY;
  return Math.sqrt(dx * dx + dy * dy);
}
function touchMid(t0, t1) {
  return { x: (t0.clientX + t1.clientX) / 2, y: (t0.clientY + t1.clientY) / 2 };
}

stage.addEventListener('touchstart', function (e) {
  if (e.touches.length === 2) {
    pan = null;
    var mid = touchMid(e.touches[0], e.touches[1]);
    pinch = { startDist: touchDist(e.touches[0], e.touches[1]), startScale: scale, midX: mid.x, midY: mid.y };
  } else if (e.touches.length === 1 && scale > MIN_SCALE) {
    pinch = null;
    pan = { x: e.touches[0].clientX, y: e.touches[0].clientY };
  }
}, { passive: true });

stage.addEventListener('touchmove', function (e) {
  if (pinch && e.touches.length === 2) {
    // Real finger-distance-ratio math: how far apart the two fingers currently
    // are, divided by how far apart they were when the pinch began, scales
    // the image proportionally — the actual pinch-to-zoom gesture, not a
    // simulated slider.
    e.preventDefault();
    var dist = touchDist(e.touches[0], e.touches[1]);
    var ratio = dist / pinch.startDist;
    var mid = touchMid(e.touches[0], e.touches[1]);
    zoomAt(mid.x, mid.y, pinch.startScale * ratio);
  } else if (pan && e.touches.length === 1) {
    e.preventDefault();
    var t = e.touches[0];
    tx += t.clientX - pan.x;
    ty += t.clientY - pan.y;
    pan.x = t.clientX; pan.y = t.clientY;
    clampPan();
    apply();
  }
}, { passive: false });

function endTouch(e) {
  if (e.touches.length < 2) pinch = null;
  if (e.touches.length < 1) pan = null;
}
stage.addEventListener('touchend', endTouch);
stage.addEventListener('touchcancel', endTouch);

resetBtn.addEventListener('click', function () {
  scale = 1; tx = 0; ty = 0;
  apply();
});

apply();