您现在的位置是：技术博客 > 前端前端

viewerjs图片查看器

Lucas2023-01-30 20:20【代码】297人已围观

简介Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。

#### 一、下载插件

1、<a href="https://www.baidu.com/download/share/viewerjs-main.zip" target='_blank'>点此下载</a> 对应的完整资源包，里面包含文档和示例。

#### 二、简单实践

只需要引入viewer.js和viewer.css文件即可，监听id=galley下的所有img元素，默认显示img的src路径图片，点击后显示data-original路径的打图。

参考解压资源包下的/viewerjs-main/docs/examples/cutom-title.html页面，代码如下。

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Viewer.js</title>
  <link rel="stylesheet" href="../css/viewer.css">
</head>
<body>
  <div class="container">
    <h1>Viewer 查看器</h1>
    <div id="galley">
      <ul class="pictures">
        <li><img data-original="../images/tibet-1.jpg" src="../images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
        <li><img data-original="../images/tibet-2.jpg" src="../images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
        <li><img data-original="../images/tibet-3.jpg" src="../images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
      </ul>
    </div>
  </div>
  <script src="../js/viewer.js"></script>
  <script>
    window.addEventListener('DOMContentLoaded', function () {
      var galley = document.getElementById('galley');
      var viewer = new Viewer(galley, {
        url: 'data-original',
        title: function (image) {
          return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')';
        },
      });
    });
  </script>
</body>
</html>
```

效果图如下：

![](/upload/article/image/20231009/0a2da8952d0bea1a4fc5275c55e1f626.png)

#### 三、详细配置参数

| 名称  |  类型 |  默认值 |  说明 |
| ------------ | ------------ | ------------ | ------------ |
|  inline |  布尔值 |  false | 启用 inline 模式  |
|  button |  布尔值 |  true | 显示右上角关闭按钮(jQuery 版本无效)  |
|  navbar |  布尔值/整型 |  true | 显示缩略图导航  |
|  title |  布尔值/整型 |  true | 显示当前图片的标题(现实 alt 属性及图片尺寸)  |
|  toolbar |  布尔值/整型 |  true | 显示工具栏  |
|  tooltip |  布尔值 |  true | 显示缩放百分比  |
|  movable |  布尔值 |  true | 图片是否可移动  |
|  zoomable |  布尔值 |  true | 图片是否可缩放  |
|  rotatable |  布尔值 |  true | 图片是否可旋转  |
|  scalable |  布尔值 |  true | 图片是否可翻转  |
|  transition |  布尔值 |  true | 使用 CSS3 过度  |
|  fullscreen |  布尔值 |  true | 播放时是否全屏  |
|  keyboard |  布尔值 |  true | 是否支持键盘  |
|  interval |  整型 |  5000 | 播放间隔，单位为毫秒  |
|  zoomRatio |  浮点型 |  0.1 | 鼠标滚动时的缩放比例  |
|  minZoomRatio |  浮点型 |  0.01 | 最小缩放比例  |
|  maxZoomRatio |  数字 |  100 | 最大缩放比例  |
|  zIndex |  数字 |  2015 | 设置图片查看器 modal 模式时的 z-index  |
|  zIndexInline |  数字 |  0 | 设置图片查看器 inline 模式时的 z-index  |
|  url |  字符串/函数 |  src | 设置大图片的 url  |
|  build |  函数 |  null | 回调函数，具体查看演示  |
|  built |  函数 |  null | 回调函数，具体查看演示  |
|  show |  函数 |  null | 回调函数，具体查看演示  |
|  shown |  函数 |  null | 回调函数，具体查看演示  |
|  hide |  函数 |  null | 回调函数，具体查看演示  |
|  hidden |  函数 |  null | 回调函数，具体查看演示  |
|  view |  函数 |  null | 回调函数，具体查看演示  |
|  viewed |  函数 |  null | 回调函数，具体查看演示  |

很赞哦！ ( 0 )

上一篇：减小PS输出的图片size

下一篇：Node管理工具nvm-desktop