viewer.js 的圖片放大使用

分為兩個版本，一個是js版本，一個是jquery版本

viewer.js 可以自行去下載

官網的下載路徑    https://viewerjs.org/getit/

注意版本不同，有的版本不支持點擊除圖片和按鈕外的空白處自動關閉放大的功能

先看圖片放大的效果

 

一、先說js版本的

引入viewer.js 

 

1、基礎調用

<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>

2、默認顯示小圖,點擊顯示大圖的

<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>    

3、配置參數的

<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>

 二、jquery 版本

引入jquery 版本的viewer.js 

1、根據圖片路徑

<div class="jq1">
    <img src="images/wenes_login_logo.png" alt="圖片1">
    <img src="images/news_top_img.jpg" alt="圖片2">
</div>
<script>
    //根據圖片路徑
    $('.jq1').viewer();

</script>

2、圖片上的自定義的路徑

<div class="jq2">
    <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>
    //圖片上的自定義的路徑即顯示小圖點擊展示大圖路徑
    $('.jq2').viewer({
        url: 'data-original',
    });

</script>