title: how to implement pinch zoom in zoom out in js
body: <p>I am trying to implement pinch zoom in zoom out in js.
  I am almost there, as I have calculated how to detect pinch zoom in zoom out in js using touch events.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dist1=0;
  function start(ev) {
  if (ev.targetTouches.length == 2) {//check if two fingers touched screen
  dist1 = Math.hypot( //get rough estimate of distance between two fingers
  ev.touches[0].pageX - ev.touches[1].pageX,
  ev.touches[0].pageY - ev.touches[1].pageY);
  }
  
  }
  function move(ev) {
  if (ev.targetTouches.length == 2 &amp;&amp; ev.changedTouches.length == 2) {
  // Check if the two target touches are the same ones that started
  var dist2 = Math.hypot(//get rough estimate of new distance between fingers
  ev.touches[0].pageX - ev.touches[1].pageX,
  ev.touches[0].pageY - ev.touches[1].pageY);
  //alert(dist);
  if(dist1&gt;dist2) {//if fingers are closer now than when they first touched screen, they are pinching
  alert('zoom out');
  }
  if(dist1&lt;dist2) {//if fingers are further apart than when they first touched the screen, they are making the zoomin gesture
  alert('zoom in');
  }
  }
  
  }
  document.getElementById ('zoom_here').addEventListener ('touchstart', start, false);
  document.getElementById('zoom_here').addEventListener('touchmove', move, false);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='zoom_here'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>now i want to translate the img as we keep zoom in</p>