仅jQuery移动捏缩放图像

Question

我有一个正在工作的JQM应用程序，我想在其中显示一些图像。这些图像当前位于其自己的iframe中，因此可以与该应用程序分开滚动。

我也希望仅对iframe中的图像进行缩放。

我意识到，如果我调整以下代码段，便可以启用捏合缩放，但这在整个应用程序中都启用了。

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

通过删除最大比例的缩小缩放，可返回所有内容。

是否有一种仅对图像启用缩放的方法？如何在iframe中添加新的视口代码，如果可以的话，该方法是否可行？

更新

• 将HTML注入到iframe中。添加了meta标记，这无济于事。

• Tried .extend（$。mobile.zoom，{locked：false，enabled：true}）;在iframe主体上，这什么也没做。

Answer 1

您可以在图片上执行此操作：

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

Answer 2

作为（破解）解决方法，也许您可​​以检测到用户何时进行捏gesture，然后使用CSS transform缩放图像。

Answer 3

事实证明，最好的方法是使用ChildBrowser插件。这在IOS和Android上非常适合图像。

IOS浏览器：

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

Android ChildBrowser：

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

然后，完成所有设置后，您可以像这样打开URL或本地文件：

 window.plugins.childBrowser.onLocationChange(location);

请注意，在IOS和Android之间的完全跨平台设置中，它们都需要不同版本的插件。 IOS要求在onDeviceReady中使用ChildBrowser进行初始化，而Android则不需要。

Answer 4

是否会使用某种小部件来放大/缩小图像原位作品？例如：http://0.s3.envato.com/files/78471334/index.htmlhttps://github.com/timmywil/jquery.panzoom

Answer 5

最简单，最完整的图像缩放库https://github.com/ondraw/SimpleJS