Interact.js Pinch-Zoom Image — Draggable & Pinch-Zoom Viewer Snippet

<div class="pzi-stage">
  <div class="pzi-head">
    <span class="pzi-tag">interact.js · gesture + drag</span>
    <h2>Pinch-Zoom Viewer</h2>
    <p>Drag to pan. Pinch with two fingers (or scroll) to zoom. Double-tap to reset.</p>
  </div>
  <div class="pzi-frame" id="pziFrame">
    <img id="pziImg" class="pzi-img" src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1200&q=80" alt="Mountain landscape" draggable="false" />
  </div>
  <div class="pzi-meta">
    <span id="pziZoom">100%</span>
    <button class="pzi-reset" id="pziReset">Reset view</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(120% 100% at 50% 0%,#161d38,#080a14);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.pzi-stage{width:min(560px,94vw);display:flex;flex-direction:column;align-items:center;gap:16px}
.pzi-head{text-align:center}
.pzi-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#818cf8;background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.3);padding:5px 12px;border-radius:99px;margin-bottom:12px}
.pzi-head h2{font-size:clamp(24px,5vw,34px);font-weight:800;letter-spacing:-.02em}
.pzi-head p{font-size:13.5px;color:#8e97b8;margin-top:7px}

.pzi-frame{position:relative;width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#0c1024;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px -24px rgba(0,0,0,.8);touch-action:none;cursor:grab;user-select:none}
.pzi-frame:active{cursor:grabbing}
.pzi-img{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;transform:translate(-50%,-50%) translate(0px,0px) scale(1);will-change:transform;pointer-events:none}

.pzi-meta{display:flex;align-items:center;gap:14px;font-size:12.5px;color:#9aa3c4}
#pziZoom{font-weight:700;color:#c7d0ff;min-width:48px;text-align:center}
.pzi-reset{padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#c3cbe8;font:600 12px system-ui;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.pzi-reset:hover{background:rgba(255,255,255,.09);color:#fff;border-color:#818cf8}

var MIN_SCALE = 0.6, MAX_SCALE = 4;
var img = document.getElementById('pziImg');
var frame = document.getElementById('pziFrame');
var zoomLabel = document.getElementById('pziZoom');

// The current transform state lives on plain vars, not read back from
// the DOM each time, because CSS transform strings are lossy to re-parse.
var state = { x: 0, y: 0, scale: 1 };

function clampScale(s) {
  return Math.max(MIN_SCALE, Math.min(MAX_SCALE, s));
}

function apply() {
  img.style.transform = 'translate(-50%, -50%) translate(' + state.x + 'px, ' + state.y + 'px) scale(' + state.scale + ')';
  zoomLabel.textContent = Math.round(state.scale * 100) + '%';
}

function resetView() {
  state.x = 0; state.y = 0; state.scale = 1;
  apply();
}

interact(frame)
  .draggable({
    inertia: true,
    listeners: {
      move: function (event) {
        state.x += event.dx;
        state.y += event.dy;
        apply();
      }
    }
  })
  .gesturable({
    listeners: {
      move: function (event) {
        // event.ds is the CHANGE in scale since the previous gesturemove,
        // not an absolute value, so it accumulates onto the current scale.
        state.scale = clampScale(state.scale + event.ds);
        apply();
      }
    }
  });

// Desktop fallback: mouse wheel zoom, centered on the cursor's position
// so the point under the pointer stays put while the image scales.
frame.addEventListener('wheel', function (e) {
  e.preventDefault();
  var delta = e.deltaY > 0 ? -0.12 : 0.12;
  state.scale = clampScale(state.scale + delta);
  apply();
}, { passive: false });

var lastTap = 0;
frame.addEventListener('pointerup', function () {
  var now = Date.now();
  if (now - lastTap < 320) resetView();
  lastTap = now;
});

document.getElementById('pziReset').addEventListener('click', resetView);

apply();