移动端jquery版本图片查看放大的功能

from？

在手机网页中，可能我们点击某个图片，该图片就可以大显示。在做七陌客服自定义的ui的时候，用户点击历史聊天记录的图片，图片理论是能放大的。但是该第三方是通过<a></a>标签跳转到另一个网页，而跳转到的这个网页没有样式，不满足需求。

遇到的问题

聊天的图片不像并排的图片，点击查看就能放大，它的图片是递增的。百度了很多，也考虑用原生写。原生编写操作要获取点击的Dom元素，获取图片地址，再渲染该图片，操作麻烦。所以还是用插件好点。因为客服自定义的ui依据第三方使用的jquery技术，所以找的jQuery插件。插件有很多，考虑兼容性等问题，目前觉得移动端点击图片放大插件使用PhotoSwipe.js和Viewer.js插件比较好用。

PhotoSwipe.js插件和Viewer.js插件的功能区别

PhotoSwipe.js插件

PhotoSwipe.js更适合多张连续图片的放大。它存放的是一个数组，不太满足聊天递增图片的需求。具体使用可以查ice小末的photoswiper官方解读文章。
photoswipe官方地址： https://photoswipe.com/documentation/faq.html#image-size

Viewer.js插件

Viewer.js有两个版本，一个jquery版本和网页版本。个人觉得网页版本较为好用。jquery版本没用过，网上有些人说jquery版本坑比较多。
官方地址：http://fengyuanchen.github.io/viewerjs/

使用：
1、引入css和js
2、初始化：

var  viewer = new Viewer(document.getElementById('conversation'), {
            url: 'data-original',
            toolbar: false,
            title: false,
            navbar: false,
        });

3、更新数据：

viewer.update()

总结

网上资料众说纷纭，关键找到解决问题的方法。