捏放大JQM/Phonegap應用程序中的圖像

我已經瀏覽了許多不同的帖子，並且似乎找不到明確解決此問題的帖子。我正在使用JQM和Phonegap構建，並需要捏合以縮放圖像。我在單頁上點擊圖像的縮略圖，圖像在單獨的頁面中打開。捏放大JQM/Phonegap應用程序中的圖像

如何在這一頁上縮小圖像？

我發現一些帖子to錘子，但從來沒有一個完整的解決方案。任何幫助將不勝感激。

這是我的圖像頁面看起來像。

<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頁面圖像瀏覽

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

更新上述14年12月2日的代碼。捏縮放正在處理圖像。

由於

RGecy

來源

2014-11-21 BGecko

可以加載在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頁面上啓用視口縮放，如果導航不會中斷您的應用程序的狀態，因爲當您返回時頁面將被重新加載。 meta標記設置，允許縮放這個

<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因爲你的頁面視口設置阻止縮放。

來源

2014-11-21 23:11:34 kindasimple

我更新了上面的代碼。我無法讓圖片顯示在iframe中。它似乎在x.contentDocument行的JavaScript分解。 – BGecko 2014-11-23 07:26:20

改爲使用frame.contentDocument ...我更新了代碼片段 – kindasimple 2014-11-23 07:28:52

當我更改爲frame.contentDocument時，得到了要在iframe中打開的圖像，但捏縮放無法正常工作。有任何想法嗎？ – BGecko 2014-11-25 10:08:43

捏放大JQM/Phonegap應用程序中的圖像

回答

相關問題