分为两个版本,一个是js版本,一个是jquery版本
先说js版本的
引入viewer.js
<div id="jq3"> <img src="images/demo_img5.jpg" alt=""> <img src="images/demo_img6.jpg" alt=""> </div> <script> viewer = new Viewer(document.getElementById('jq3')) </script>
默认显示小图,点击显示大图的
<div id="jq3"> <img src="images/demo_img5.jpg" alt="" data-original="images/wenes_login_logo.png"> <img src="images/demo_img6.jpg" alt="" data-original="images/news_top_img.jpg"> </div> <script> viewer = new Viewer(document.getElementById('jq3'),{ url: 'data-original' }) </script>
配置参数的
<div id="jq3"> <img src="images/demo_img5.jpg" alt="" data-original="images/wenes_login_logo.png"> <img src="images/demo_img6.jpg" alt="" data-original="images/news_top_img.jpg"> </div> <script> //viewer = new Viewer(document.getElementById('jq3')) viewer = new Viewer(document.getElementById('jq3'),{ url: 'data-original' }) viewer = new Viewer(document.getElementById('jq3'),{ inline: false, //是否启用 inline 模式 url: 'data-original', //设置大图片的 url navbar: false, //显示缩略图导航 zoomRatio: 0.4, //鼠标滚动时的缩放比例 // minZoomRatio:0.01, //最小缩放比例 // maxZoomRatio:100, //最大缩放比例 // zIndex:2015, //设置图片查看器 modal 模式时的 z-index button: true, //显示右上角关闭按钮(jQuery 版本无效) title: false, //显示当前图片的标题(现实 alt 属性及图片尺寸) keyboard: true, //是否支持键盘 movable: true, //图片是否可移动 tooltip: true, //显示缩放百分比 // rotatable: true, //图片是否可旋转 // scalable: true, //图片是否可翻转 toolbar: { //显示工具栏 zoomIn: 1, zoomOut: 1, oneToOne: 1, reset: 1, prev: 0, play: 0, next: 0, rotateLeft: 1, rotateRight: 1, flipHorizontal: 1, flipVertical: 1, }, viewed: function () { viewer.view(0); } }); </script>