title: Hammer JS panning not moving image
body: <p>I have come up with the following script (based on answers here and around the web) to pinch/zoom and move zoomed image. It will do the zooming in/out but will not move the resized image. The document.write script never executes even though the code looks perfectly fine. Am I missing something obvious?</p>
  
  <pre><code>$(image).hammer().on('pinch', function(event) {
      var photo = $(this);
  
      newWidth = photo.width() * event.gesture.scale;
      newHeight = photo.height() * event.gesture.scale;
  
      // Convert from screen to image coordinates
      var x;
      var y;
      x -= offset.left + newX;
      y -= offset.top + newY;                                     
  
      newX += -x * (newWidth - width) / newWidth;
      newY += -y * (newHeight - height) / newHeight;
  
      photo.css('transform', "scale3d("+event.gesture.scale+", "+event.gesture.scale+", 1)");      
      wrap.css('transform', "translate3d("+newX+"px, "+newY+"px, 0)");
  
      width = newWidth;
      height = newHeight;
  // Reset pinch
  }).on('pinchout',function(event){
      photo.css('transform', "translate3d(0,0,0)");
  // Start of moving zooming
  }).on('pan panstart', function(event){
      photo.css('transform', "translate3d("+event.gesture.deltaX+"px, "+event.gesture.deltaY+"px, 0) ");                  
      document.write('ending panning 1');
  // End of moving
  }).on('pan panend', function(event){
      photo.css('transform', "translate3d(0,0,0)");
      panX += event.gesture.deltaX/zoom;
      panY += event.gesture.deltaY/zoom;
      wrap.css({left: panX,top: panY});
      document.write('ending panning 2');
  })                          
  </code></pre>