Pinch to Zoom Image in JQM/Phonegap app

Question

I have looked through a number of different post here and cant seem to find a post that definitively solves this. I am using JQM and Phonegap build and need a way to pinch to zoom an image. I am clicking on the thumbnail of an image on one page and the image opens in a separate page.

How do I get pinch to zoom on the image on just this one page?

I found some post to hammerjs but never a complete solution. Any help would be greatly appreciated.

Here is what my image page looks like.

<div data-role="page" id="imagePage">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
        <a href="#home" class="ui-btn ui-btn-icon-left ui-icon-carat-l ui-btn-corner-all" data-rel="back" data-direction="reverse">Back</a>
    <h1>Image</h1>
</div>
    <div data-role="content">
        <div  id="imageContainer">
          <img src="myimage.jpg" width="100%">
        </div>
    </div>
</div>

UPDATED CODE:

<div data-role="page" id="imagePage" data-theme="d">
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
        <a href="#home" class="ui-btn ui-btn-icon-left ui-icon-carat-l ui-btn-corner-all ui-shadow ui-nodisc-icon" data-rel="back" data-direction="reverse">Back</a>
    <h1>Image</h1>
</div>
    <div data-role="content" id="imageContent" style="padding:0px;width:100%; height:100%;"> 
        <iframe id="myframe" src="ImageViewer.html" style="width:100%; height:100%;"></iframe>
</div><!-- /Content -->
</div>

iframe page ImageViewer

<html>
<head>
<meta charset="utf-8">
<title>ImageViewer</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.panzoom.min.js"></script>
</head>
<body>
<img src="" style="width:100%;"/>
<script>
    $(document).ready(function() {
      $("img").panzoom();
    });
</script>
</body>
</html>

JavaScript

function openImage(imageURL) {
var frame = document.getElementById("myframe");
var frameDoc = frame.contentDocument;
frameDoc.querySelector("img").src = imageURL;   
}

Updated the code above 12/2/14. Pinch zoom is working on the image.

Thanks

RGecy

Answer 1

You can load the content in an iframe, and use gesture detection and css transforms to scale the content.

You will have to set the source of an <img> tag to the DOM, so your setup would look like this

<iframe id="myframe" src="imageViewer.html"></iframe>

<script>
var frame = document.getElementById("myframe");
var frameDoc = frame.contentDocument;
frameDoc.querySelector("img").src = "myimage.jpg"
</script>

and imageViewer.html you can use the jquery plugin jquery.panzoom to do the scaling.

<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.panzoom.js"></script>
</head><body><img />
<script>
$(document).ready(function() {
  $("img").panzoom();
});
</script>

That should do it. Another option is to enable viewport scaling on a different html page, if that navigation doesn't disrupt the state of your your application since the page will be reloaded when you return. The meta tag setting that allows for scaling is this

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">

and cordova has a preference in your config.xml

 <preference name="EnableViewportScale" value="true" />

Its suggested in some other answers on SO , but I haven't tried it. Sadly, you can't load the other page in an iframe since your page viewport settings prevent scaling.

Pinch to Zoom Image in JQM/Phonegap app

Question

1 answers

solution1
4 ACCPTED 2014-11-21 23:11:34

Pinch to Zoom Image in JQM/Phonegap app

Question

1 answers

solution1 4 ACCPTED 2014-11-21 23:11:34

solution1
4 ACCPTED 2014-11-21 23:11:34