viewer.js使用

viewer GitHub 地址：

JS 版本：https://github.com/fengyuanchen/viewerjs jQuery 版本：https://github.com/fengyuanchen/viewer

viewer 使用

js和css文件的引入

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

viewer.js有jq和js两种，使用的方法也不同，我这里引入的是js这种，下面写的也是js的使用
viewerjs.rar

viewer.js的使用

一张图片

<img src="你的图片地址" id="hideImg" style="display: none;"/>
<script type="text/javascript">
var image = new Viewer(document.getElementById('hideImg'),{
                    url: 'data-original'
                });
</script>

这样写的话，就相当于在你的图片上加了一个点击事件，点击一下图片就触发了。

多张图片

<ul id="jq22">
    <li><img src="img/tibet-1.jpg" alt="图片1"></li>
    <li><img src="img/tibet-2.jpg" alt="图片2"></li>
    <li><img src="img/tibet-3.jpg" alt="图片3"></li>
    <li><img src="img/tibet-4.jpg" alt="图片4"></li>
    <li><img src="img/tibet-5.jpg" alt="图片5"></li>
    <li><img src="img/tibet-6.jpg" alt="图片6"></li>
</ul>
var viewer = new Viewer(document.getElementById('jq22'),{
    url: 'data-original'
});

把多张图片放到一个ul里面就可以了

用url展示图片

<div onclick="showImg()" style="width: 200px;height: 200px;background-color: #0000FF;"></div>
<img src="" id="hideImg" style="display: none;"/>
<script type="text/javascript">
  function showImg(){
      document.getElementById('hideImg').src="img/qipan.jpg";
      var image = new Viewer(document.getElementById('hideImg'),{
                      url: 'data-original'
                  });
      document.getElementById('hideImg').click();
  }
</script>

通过点击触发showImg事件，把url赋值给隐藏的img标签，再触发这个标签的点击事件就可以展示图片了。

其他设置