Viewer.js 是一个轻量级的 JavaScript 插件，用于在网页上实现图片的预览和查看功能。它提供了放大、缩小、旋转以及全屏查看等功能，非常适合用于图片库、相册或任何需要丰富图片浏览体验的项目。以下是 Viewer.js 的应用指南，帮助你快速上手并在项目中使用这个插件。

1. 安装 Viewer.js

首先，你需要在项目中引入 Viewer.js 的相关文件，可以通过以下方式安装：

使用 npm 安装

npm install viewerjs  

使用 CDN

在你的 HTML 文件中引入以下链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.4/viewer.min.css" />  
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.4/viewer.min.js"></script>  

2. HTML 结构

在 HTML 中，确保有一个包含图片的容器，例如：

<div id="gallery">  
    <img src="image1.jpg" alt="Image 1">  
    <img src="image2.jpg" alt="Image 2">  
    <img src="image3.jpg" alt="Image 3">  
</div>  

3. 初始化 Viewer.js

在 JavaScript 中，你需要初始化 Viewer.js，并将其绑定到包含图片的容器上：

// Select the div containing your images  
const gallery = document.getElementById('gallery');  
// Initialize Viewer.js  
const viewer = new Viewer(gallery, {  
    inline: false,  // 是否以内嵌方式显示。  
    navbar: true,   // 显示导航栏  
    toolbar: true,  // 显示工具栏  
    tooltip: true,  // 显示缩放百分比提示  
    fullscreen: true // 支持全屏查看  
});  

4. 配置选项

Viewer.js 提供了多种配置选项，你可以根据项目需求进行调整，例如：

• inline: 布尔值，是否在网页中内嵌显示，而不是弹出查看。
• navbar: 布尔值，控制是否显示图片导航栏。
• toolbar: 设置工具栏的显示和功能，支持自定义按钮。
• title: 布尔值或函数，定义是否显示图片的标题信息。
• zoomRatio: 数值，控制缩放速度。

你可以在初始化时传入这些选项来定制 Viewer.js 的行为。

5. 高级功能

Viewer.js 还支持事件监听和方法调用，例如：

事件监听

viewer.on('view', function(event) {  
    console.log('Viewing image index:', event.detail.index);  
});  

调用方法

// 放大  
viewer.zoom(0.1);  
// 旋转  
viewer.rotate(90);  
// 切换到下一个图片  
viewer.next();  

总结

使用 Viewer.js 可以为你的网站或应用带来更佳的图片查看体验。通过上述步骤，你可以轻松地在项目中集成这个强大的图片预览工具，并根据自己的需求进行配置和优化。如果需要更多的功能和选项，请查阅 Viewer.js 的官方文档。