scaling image on pinch gesture

I'm using the jQuery touchy plugin for detecting the pinch event to give users the ability to zoom in/out on an image. Here's 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
    });
});

Where the custom data object contains the following:

  • scale
  • previousScale
  • currentPoint
  • startPoint
  • startDistance

It works fine on the first pinch, but once my fingers leave the screen and then I try to do it again, the image re-scales back up. How can I modify my handler so that the image continues where it left off rather than re-scale? Using the data's previousScale didn't help since the previousScale just gets reset as well.

Answers


The problem here is that you're not resetting your vars w and h to their post-scaled values, only the css, so the style reverts back to 800x600 on another scale event. You need a persistent w and h that are set to w*data.scale and h*data.scale on the scale event.


Need Your Help

programmatically setting orientation in viewdidload is not working

ios screen-orientation device-orientation

I have created an app for ipad in which the homescreen should be displayed only in portrait mode. So i have used the below code in viewdidload.

C#/.net ActiveDirectory Resources

c# .net active-directory

I have recently assumed maintenance of an app that performs a lot of ActiveDirectory-related tasks, both querying and updating.