viewer.js 的图片放大使用

分为两个版本，一个是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>