javascript - 如何实现手机淘宝商品图片的手指缩放功能？

Question

如图，点击商品图片后会出现一个黑色的弹出层，在这个弹出层内可以缩放（pinch）图片。

网页添加了<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">，所以系统级的缩放是被禁止了的。

我猜想应该可以用hammer.js中的pinch事件模拟，每次pinch改变图片的长宽，但初步实验下发现有些复杂。

例如，我的网页中是不加载原图的，所以点击这个弹出层后，要额外加载原图，还需监听原图的onload事件，然后才允许pinch。当然，也可以直接加载原图，这样会省事很多，淘宝就是这么做的。

而且pinch事件的触发条件调试起来也比较麻烦。

所以，最直接的方案是有类似的jQuery插件，但我搜索了一会儿，没发现。不知道大家是否知道能实现这样功能的插件？

Answer 1

百度有个touch.js，支持各种手势，包括缩放pinch事件，pinchin是缩小，pinchout是放大。

Answer 2

photoswiper 刚好也需要用这种效果 找了下 http://photoswipe.com/

Answer 3

用photoswipe