js/jquery图片预览/图片查看插件

一款强大的 jQuery 图像浏览插件,在信息详情页面实现点击图片可以预览,前端哥博客也是用的这个js，这里为分享一下使用方法，需要的朋友可以参考下

一、简介

Viewer.js 是一款强大的图片查看器。

Viewer.js 有以下特点：

支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转（类似微博的图片旋转）
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式（可做屏保）
支持缩略图
支持标题显示
支持多种自定义事件
Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样，但代码不一样，不能通用。

引入文件(原生js)：

<link rel="stylesheet" href="css/viewer.min.css"><script src="js/viewer.min.js"></script>

引入文件(原生jquery)：

<link rel="stylesheet" href="css/viewer.min.css"><script src="js/jquery.min.js"></script><script src="js/viewer.min.js"></script>

HTML

<ul id="qianduange">	<li><img data-original="img/tibet-1.jpg" src="img/tibet-1.jpg" alt="图片1"></li>	<li><img data-original="img/tibet-2.jpg" src="img/tibet-2.jpg" alt="图片2"></li>	<li><img data-original="img/tibet-3.jpg" src="img/tibet-3.jpg" alt="图片3"></li>	<li><img data-original="img/tibet-4.jpg" src="img/tibet-4.jpg" alt="图片4"></li>	<li><img data-original="img/tibet-5.jpg" src="img/tibet-5.jpg" alt="图片5"></li>	<li><img data-original="img/tibet-6.jpg" src="img/tibet-6.jpg" alt="图片6"></li></ul>

原生js代码：

var viewer = new Viewer(document.getElementById('qianduange'));

jquery代码：

$('#qianduange').viewer({ url: 'url'}); $('#qianduange').viewer({ url: 'data-original'});

配置