JQM/Phonegap应用程序中缩放图像的夹点

Question

我在这里看了很多不同的帖子，似乎找不到一个能彻底解决这个问题的帖子。我使用JQM和Phonegap构建，需要一种方法来缩小图像。我在一个页面上点击图片的缩略图，然后图像在一个单独的页面中打开。

如何在这一页上放大图像？

我找到了一些锤子，但从来没有一个完整的解决方案。任何帮助都将不胜感激。

这是我的图像页面的样子。

<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>

更新代码：

<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页面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;   
}

更新了12/2/14以上的代码。点击缩放正在处理图像。

谢谢

RGecy

Answer 1

您可以在iframe中加载内容，并使用手势检测和css转换来缩放内容。

您必须将<img>标记的源设置为DOM，因此您的设置如下所示

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

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

imageViewer.html，您可以使用jquery jquery.panzoom进行缩放。

<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>

​

这样就行了。另一种选择是在不同的html页面上启用viewport缩放，如果导航没有破坏应用程序的状态，因为页面将在返回时重新加载。允许缩放的元标记设置如下

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

科多瓦在你的config.xml中有个优势

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

这是在其他一些answers on SO中提出的，但我还没有尝试过。可悲的是，您的can't load the other page in an iframe，因为您的页面视图设置阻止缩放。