How to add pinch/zoom behavior using jQuery Mobile?

android ios jquery-mobile ibm-mobilefirst pinchzoom

17,812

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.

17,812

Author by

Balaji Sabdhar M

Hi I am Mobile App developer. I have the following skills c c++ java objective c html css javascript xml xpath xslt android ios phonegap

Updated on June 04, 2022

Comments

Balaji Sabdhar M almost 2 years

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.