使用viewerjs插件给博客文章内容图片增加查看缩放功能

上周末看到了viewerjs这个插件，感觉非常不错，晚上抽一小会儿给博客增加图片点击查看缩放功能。

viewerjs 官方地址：https://fengyuanchen.github.io/viewerjs/

viewerjs github仓库：https://github.com/fengyuanchen/viewerjs

viewerjs使用示例

viewerjs官方文档写的比较全，但是实际使用起来还是有些需要注意的地方，这里实践说明一下。

1、引入js和css

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

2、单张图片使用示例

<!-- a block container is required -->
<div>
  <img id="image" src="picture.jpg" alt="Picture">
</div>

<script>
// View an image.
const viewer = new Viewer(document.getElementById('image'), {
  inline: true,
  viewed() {
    viewer.zoomTo(1);
  },
});
// Then, show the image by clicking it, or call `viewer.show()`.
</script>

3、多张图片使用示例

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>

<script>
// View a list of images.
// Note: All images within the container will be found by calling `element.querySelectorAll('img')`.
const gallery = new Viewer(document.getElementById('images'));
// Then, show one image by click it, or call `gallery.show()`.
</script>

4、几个属性

• title：title的可视性，默认true
• navbar：导航栏的可视性，默认true
• toolbar：工具栏的可视性，默认true

如果要单张图片显示，而不是点击一张后可以切换到下一张，可以把navbar和toolbar设置为false。

5、遇到的z-index冲突问题

当页面有div区域的z-index值为9999时，会出现viewerjs的遮罩在z-index:9999的div区块的下方，当把div的z-index值改为1值，此bug消失，也就是页面其它区块的z-index不能太大，具体最大能是多少，没有测试。