H5 移动端图片手势缩放和左右滑动的实现(pinchzoom+swipe)

最近项目的需求，需要在手机端查看图片时可以手势缩放和左右滑动。

左右滑动就是一个轮播，这个简单，项目中已经用swipe实现了。接下来就是缩放的问题了，在网上看了很多，最后决定用pinchzoom这个插件，原因是使用简单，几行代码就搞定了。但是也踩了一些坑。

首先，在官网上下载的demo是有问题的，官网上有个在swipe上使用pinchzoom的demo，这个demo实际跑起来的效果是只能缩放，但是左右滑动失效了。我尼玛真是不敢相信官方demo是这种水准。调用的代码如下：

<script type="text/javascript" src="swipe.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../dist/pinch-zoom.umd.js"></script>
<script type='text/javascript'>
  Array.from(document.querySelectorAll('.pinch-zoom')).forEach(function(el) {
    new PinchZoom.default(el, {});
  });

  window.mySwipe = new Swipe(document.querySelector('#slider'), {
    speed: 400,
  });
</script>

无奈只要在网上找swipe失效的原因。但是很奇怪的是，找了一天，居然没有人说到pinchzoom会导致swipe失效！！！为什么会这样？难道大家都不是用的官方的例子？

继续找例子吧。找了很多，基本上都是官网那个写法，一度让我怀疑pinchzoom和swipe的组合是不是压根就不能一起用。。

不过最后在一个网站的预览上发现用这两个插件居然没有问题！！深度对比代码后发现，原来用的js文件不一样！！它用的不是官方demo里的js。。。

官方demo里的js是用的pinch-zoom.umd.js，而这个里面用的是pinchzoom.js。官方demo的src文件夹里还有一个pinch-zoom.js，但是经过对比，很遗憾这两个虽然名字很相似，但不是一样东西。

最终，把这个pinchzoom.js的内容拷贝下来后引入并结合jquery搞定，注意使用这个js必须引入jquery，否则会报错。最终代码如下：

<script type="text/javascript" src="swipe.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pinchzoom.js"></script>
<script type="text/javascript">
        $(function () {
            $('div.pinch-zoom').each(function () {
                new RTP.PinchZoom($(this), {});
            });

            window.mySwipe = new Swipe(document.getElementById('slider'), {
                speed: 400
            });
        })

    </script>

最终效果请看http://zpycloud.com/pinchzoom-master/demo/test.html（用手机打开）