Pinch gesture image scaling

Question

I use the jQuery touchy plugin to detect pinch events to give users the ability to zoom in / out, Here is the gist of my code:

  var w = 800,
     h = 600;
 $ ('img'). on ('touchy-pinch', function (e, $ target, data) {
     $ (this) .css ({
         width: w * data.scale,
         height: h * data.scale
     });
 });

If the user data object contains the following:

• Scale
• previousScale
• currentPoint
• Startpoint
• startDistance

It works great on the first pinch, but as soon as my fingers leave the screen, and then I try to do it again, the image scales again. How can I change my handler so that the image continues where it was stopped, rather than being rescaled? Using previousScale data did not help, as the previous scale just gets reset.

Answer 1

The problem is that you are not reloading your vars w and h with their values ​​after scaling, but only css, so the style returns to 800x600 in another scale event. You will need the constants w and h, which are set to w*data.scale and h*data.scale in the scale event.