Pinch and Zoom with Hammer.js

const pinchZoom = (imageElement) => {
  const minScale = 1;
  const maxScale = 4;

  const imageElementWidth = imageElement.offsetWidth;
  const imageElementHeight = imageElement.offsetHeight;

  let imageElementScale = 1;

  let rangeMaxX = 0;
  let rangeMinX = 0;

  let rangeMaxY = 0;
  let rangeMinY = 0;

  const updateRange = () => {
    const rangeX = Math.max(0, Math.round(imageElementWidth * imageElementScale) - imageElementWidth);
    const rangeY = Math.max(0, Math.round(imageElementHeight * imageElementScale) - imageElementHeight);

    rangeMaxX = Math.round(rangeX / 2);
    rangeMinX = Math.round(0 - rangeMaxX);

    rangeMaxY = Math.round(rangeY / 2);
    rangeMinY = Math.round(0 - rangeMaxY);
  };

  const updateImage = (deltaX, deltaY) => {
    const imageElementCurrentX = Math.min(Math.max(rangeMinX, deltaX), rangeMaxX) * 2;
    const imageElementCurrentY = Math.min(Math.max(rangeMinY, deltaY), rangeMaxY) * 2;

    const transform = `translate3d(${imageElementCurrentX}px, ${imageElementCurrentY}px, 0) scale(${imageElementScale})`;
    imageElement.style.transform = transform;
    imageElement.style.WebkitTransform = transform;
    imageElement.style.zIndex = "9999";
  };

  const resetImage = () => {
    imageElement.style.transform = "";
    imageElement.style.WebkitTransform = "";
    imageElement.style.zIndex = "";
  };

  imageElement.parentNode.style.overflow = 'visible';
  imageElement.classList.add('pz-Image');

  const hammertime = new Hammer.Manager(imageElement, {
    touchAction: "auto",
    recognizers: [
      [Hammer.Pinch, { enable: true }]
    ]
  });

  hammertime.on('pinchstart', event => {
    console.log('pinchstart', event);
  });

  hammertime.on('pinchmove', event => {
    // console.log('pinchmove', event);
    imageElementScale = Math.min(Math.max(minScale, event.scale), maxScale);
    updateRange();
    updateImage(event.deltaX, event.deltaY);
  });

  hammertime.on('pinchend', event => {
    console.log('pinchend', event);
    resetImage();
  });
}

document.querySelectorAll(".pz-Media img:not(.pz-Image)").forEach(element => {
    pinchZoom(element);
});