Viewer.js 安装与使用指南

Viewer.js 安装与使用指南

viewerjsJavaScript image viewer.项目地址:https://gitcode.com/gh_mirrors/vi/viewerjs

目录结构及介绍

当你下载或克隆了 ViewerJS 的源代码之后, 你会看到以下目录结构:

dist/
├── viewer.css           # 主样式表文件
├── viewer.min.css       # 压缩过的主样式表文件
├── viewer.js            # UMD 模式的主脚本文件
├── viewer.min.js        # 压缩过后的 UMD 主脚本文件
├── viewer.common.js     # CommonJS 默认版本
└── viewer.esm.js        # ES Module 格式脚本文件

以上这些文件均为 ViewerJS 的主要构建产物. 其中 .css 和 .js 文件为未压缩版本, 而 .min.css 和 .min.js 则是经过压缩处理的版本, 以减少加载时间.

在实际部署过程中, 你可以选择根据你的项目需求引入对应版本的 CSS 或 JS 文件. 例如, 在生产环境中, 推荐使用 .min 后缀的文件来提升页面加载速度; 开发环境下则可以使用非压缩版本方便调试.

启动文件介绍

JS 文件

viewer.js / viewer.min.js

UMD(通用模块定义)格式的脚本文件, 支持所有现代浏览器环境以及主流的 JavaScript 模块加载器（如 RequireJS、AMD）. 适用于需要通过模块化方式导入并使用 Viewer.js 功能的项目.

viewer.common.js

该文件提供了 CommonJS 模块接口, 可以被 Node.js 等支持 CommonJS 规范的环境识别.

适用于运行于服务器端(Node.js)的应用程序中.

viewer.esm.js

ES Module 格式的脚本文件, 符合 ES6 模块规范. 推荐用于支持 ES Modules 的现代前端开发流程, 如 Webpack 构建系统等.

适用于现代化的 Web 应用或者框架项目(React/Angular/Vue).

CSS 文件

viewer.css / viewer.min.css

分别提供了未经压缩和经过压缩处理的 CSS 文件, 这些文件包含了使 Viewer.js 能够正常显示和操作图片的所有样式规则.

建议在 HTML 页面中加入如下语句以引入样式表:

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

配置文件介绍

Viewer.js 提供了丰富的选项, 允许开发者进行高度定制化配置以适应各种不同场景的需求. 但是它本身并不提供一个单独的配置文件, 而是在初始化时通过参数对象传递给 viewer.js 来实现各项功能的开启或关闭.

下面是部分常用可配置项的列举:

{
    // 是否启用全屏查看模式
    fullscreenButton: true,

    // 是否允许拖拽移动图像
    movable: true,

    // 是否展示工具栏按钮
    toolbar: true,
    
    // 滚轮放大缩小图像是否开启
    zoomOnWheel: true,
    
    // 是否允许翻转图像方向
    flip: {
      horizontal: true,
      vertical: true
    },

    // 自定义鼠标悬停时显示的提示文本
    tooltip: function(index) { return index + 1; }
}

要设置这些参数, 只需在创建新实例时传入一个配置对象即可:

var viewer = new Viewer(element, config);

其中 element 是要将 Viewer 实例绑定到的 DOM 元素的选择器, 而 config 就是我们刚才提到的那个参数对象. 当然这只展示了很少一部分可选参数的例子, 更详细的参数列表可以在 official documentation 中找到。

希望这份指南能够帮助你更好地理解并利用 Viewer.js 的强大功能! 如果还有任何疑问或遇到困难, 不妨查阅其完整文档进一步学习了解。

viewerjsJavaScript image viewer.项目地址:https://gitcode.com/gh_mirrors/vi/viewerjs