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> </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.