CODEWITHSUNDEEP
jqueryhtmlcordovajquery-mobilepinchzoom
Halsafar
Halsafar

Reputation: 2640

JQuery Mobile Pinch Zoom Image Only

I have a working JQM application that I'd like to display some images in. The images currently are in their own iframe so they can be scrolled separately from the app.

I'd like to be able to pinch zoom only the images within the iframe as well.

I realize if I adjust the following code snippet that I can enable pinch zoom but this enabled it for the entire application. 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

By removing maximum-scale pinch zoom returns but for everything.

Is there a way to enable pinch zoom only for an image? How about adding a new viewport tag to the iframe, would that work if that is even possible?

UPDATE

Upvotes: 8

Views: 36185

Answers (4)

HoaPhan
HoaPhan

Reputation: 1916

Would using some kind of widget to zoom in/out the image inplace work? eg: http://0.s3.envato.com/files/78471334/index.html
https://github.com/timmywil/jquery.panzoom

Upvotes: 0

Sujan Shrestha
Sujan Shrestha

Reputation: 191

you can do this on image:

var image=document.getElementById('imageId');

image.addEventListener('gesturechange',function(e){

    if(e.scale>1){
        //zoom in 
        //increase the size of image according to the e.scale
    }

    else if(e.scale<1){
        //zoom out 
        //decrease the size of image according to the e.scale
    }
});

Upvotes: 6

Halsafar
Halsafar

Reputation: 2640

It turns out the best way to do this is to use the ChildBrowser plugin. This on IOS and Android works perfect for images.

IOS Childbrowser:

 https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser

Android ChildBrowser:

 https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser

Then once you have done all the setup you can open URL's or local files like this:

 window.plugins.childBrowser.onLocationChange(location);

Do note that in a fully cross platform setup between IOS and Android they both need different versions of the plugin. IOS requires ChildBrowser init in onDeviceReady, Android does not.

Upvotes: 0

Jeffery To
Jeffery To

Reputation: 11936

As a (hack) workaround, perhaps you can detect when the user is performing a pinch gesture, then zoom the image using a CSS transform.

Upvotes: 1

Related Questions