pinch zoom in, zoom out - Javascript/jQuery/jQuery mobile events for web on Android platform?

Question

What are the Javascript or jQuery or jQuery mobile events involved in pinch zoom in and zoom out? I am trying to capture those events to zoom in and zoom out of an image which is inside a div without affecting the entire layout of the website. Simplest way to detect a pinch works for iPad but not android.

What are the equivalent way to detect the same on Android platform for web?

Any help is appreciated.

EDIT: I have been trying touchy.js and that works for doing zoom-in and zoom-out for images but, zooming into an image is not useful if part of the image is not accessible by finger swipe or something of that sort.

For example, consider the following code:

    <div style=" border: 1px solid blue; width: 560px; overflow:scroll;">
      <p>&nbsp;</p>
      <img id="image" src="images/tux.png" alt="my image" style=" border: 1em solid gray;" />
    </div>

I need the image to stay inside the div and the user should be able to move around the image after they zoom in. But with this code, I have to swipe my finger on the empty region (created by the paragraph tag) in order to go to different part of the image horizontally. Same happens vertically (you'll have to swipe your finger on an empty space on the web page in order to see the image length wise). What I am trying to say is, swiping motion inside the image does not have any effect while the users will expect to do that after zooming into the image.

It's very hard to explain without an example and I tried creating http://jsfiddle.net/Debarupa/8peaf/ but it does not work as I would like it to since I cannot edit the meta in head. I needed to add:

     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1" />

so that the entire webpage is not zoomable.

Answer 1

You can calculate your own scale by monitoring the user's gesture and tracking the points of contact of their fingers.

Something like:

var tracks = [];
$myElement.on("touchmove", function (event) {

    //only run code if the user has two fingers touching
    if (event.originalEvent.touches.length === 2) {

        //track the touches, I'm setting each touch as an array inside the tracks array
        //each touch array contains an X and Y coordinate
        tracks.push([ [event.originalEvent.touches[0].pageX, event.originalEvent.touches[0].pageY], [event.originalEvent.touches[1].pageX, event.originalEvent.touches[1].pageY] ]);
    }
}).on("touchstart", function () {
    //start-over
    tracks = [];
}).on("touchend", function () {
    //now you can decide the scale that the user chose
    //take the track points that are the closest and determine the difference between them and the points that are the farthest away from each other
});

But, if you want to use something pre-made, then I suggest checking-out Touchy: https://github.com/HotStudio/touchy