Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

  • Injected HTML into the iframe. Added the meta tag, this did not help.

  • Tried .extend($.mobile.zoom, {locked:false,enabled:true}); on the iframe body, this did nothing.

like image 642
Halsafar Avatar asked May 27 '12 22:05

Halsafar


2 Answers

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
    }
});
like image 182
Sujan Shrestha Avatar answered Sep 28 '22 15:09

Sujan Shrestha


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

like image 22
Jeffery To Avatar answered Sep 28 '22 14:09

Jeffery To