51工具盒子分享一个非常简单的图片预览插件viewer
首先引入js和css
viewer.js:下载链接
jquery1.11.3.js:下载链接
jquery-viewer.min.js:下载链接
viewer.css:下载链接
然后引入
|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | hljs html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="{路径}/viewer.css" rel="external nofollow" rel="external nofollow"> <script src="{路径}/jquery-1.11.3.min.js"></script> <script src="{路径}/viewer.js"></script> <script src="{路径}/jquery-viewer.min.js"></script> </head> |
使用方式：
|---------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | hljs html <body> <!-- 需要一个块级容器 --> <div> <img id="image" src="http://p16.qhimg.com/bdm/960_593_0/t01ba97d26345750c04.jpg" alt="Picture"> </div> <div> <ul id="images"> <li><img src="http://p7.qhimg.com/bdm/960_593_0/t01b32959885c781013.jpg" alt="Picture 1"></li> <li><img src="http://p19.qhimg.com/bdm/480_296_0/t01bf50d8d5d76238c6.jpg" alt="Picture 2"></li> <li><img src="http://p18.qhimg.com/bdm/960_593_0/t0177a850faae7b42f4.jpg" alt="Picture 3"></li> </ul> </div> </body> <script type="text/javascript"> var $image = $('#image'); $image.viewer({ //行内显示（默认初始化） inline: false, viewed: function () { //缩放等级（1倍) $image.viewer('zoomTo', 1); } }); // 初始化后获取Viewer.js实例 var viewer = $image.data('viewer'); // 查看图像列表 $('#images').viewer(); </script> |
项目文档：链接
