How to add pinch/zoom behavior using jQuery Mobile?
I need to create a Mobile Application using jquery Mobile. I don't understand how to implement pinch-zooming for an image that is displayed in the app.
Answer
Is there a particular reason to use jQuery Mobile for this? The fact your application UI uses it to build your UI does not mean this behavior needs to be implemented using it.
The are other options, like the below jQuery plug-in. Note that a Worklight application by default uses jQuery anyway. So you're "half-way" there.
I've successfully used the Panzoom jQuery plug-in to zoom-in an image in iOS using a pinch gesture.
The plug-in has many options so there is a learning curve, but it works well.
From the website:
Panzoom includes support for touch gestures and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You'll be amazed at how well this performs on your mobile device.
iOS and Android are supported.
As a very basic test (adding options will be required to making the pinch scaling work as desired), I did this:
In common\index.html:
...
<head>
...
<script src="js/jquery.panzoom.min.js"></script>
</head>
<body>
<div class="panzoom-elements">
<img src="http://img2.wikia.nocookie.net/__cb20130627213136/halonocanon/es/images/2/2e/Halo_Wars_Spartan.png"/>
</div>
...
...
</body>
In common\js\main.js:
function wlCommonInit(){
$(".panzoom-elements").panzoom({ });
}
Again, you'll need to play with the options to get the zooming experience you're looking for.