EasyZoom 技术文档

1. 安装指南

依赖项

EasyZoom 是一个基于 jQuery 的图像缩放和拖动插件，因此需要确保项目中已经引入了 jQuery 1.7 或更高版本。EasyZoom 兼容 jQuery 1.x、2.x 和 3.x（包括 slim 版本）。

安装步骤

1. 通过 npm 安装：

   npm install easyzoom --save
   

2. 通过 CDN 引入： 你也可以直接通过 CDN 引入 EasyZoom 和 jQuery：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/easyzoom/dist/easyzoom.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easyzoom/dist/easyzoom.css">
   

3. 手动下载： 你也可以从 GitHub 下载 EasyZoom 的源码，并将其包含在你的项目中。

2. 项目的使用说明

基本用法

在页面中引入 jQuery 和 EasyZoom 后，你可以通过以下方式初始化 EasyZoom：

<div class="easyzoom">
    <a href="large-image.jpg">
        <img src="small-image.jpg" alt="" />
    </a>
</div>

<script>
    $(document).ready(function() {
        $('.easyzoom').easyZoom();
    });
</script>

自定义配置

EasyZoom 提供了一些配置选项，你可以根据需要进行自定义：

$('.easyzoom').easyZoom({
    errorMessage: '图像加载失败',
    loadingNotice: '正在加载图像...',
    onShow: function() {
        console.log('EasyZoom 已显示');
    },
    onHide: function() {
        console.log('EasyZoom 已隐藏');
    }
});

3. 项目 API 使用文档

初始化

• $('.easyzoom').easyZoom()：初始化 EasyZoom 插件。

配置选项

• errorMessage：当图像加载失败时显示的错误信息。
• loadingNotice：图像加载时的提示信息。
• onShow：当 EasyZoom 显示时的回调函数。
• onHide：当 EasyZoom 隐藏时的回调函数。

方法

• show()：手动显示 EasyZoom。
• hide()：手动隐藏 EasyZoom。
• teardown()：销毁 EasyZoom 实例。

事件

• easyzoom:show：EasyZoom 显示时触发。
• easyzoom:hide：EasyZoom 隐藏时触发。

4. 项目安装方式

通过 npm 安装

npm install easyzoom --save

通过 CDN 引入

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/easyzoom/dist/easyzoom.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easyzoom/dist/easyzoom.css">

手动下载

从 GitHub 下载 EasyZoom 的源码，并将其包含在你的项目中。

---

通过以上文档，你应该能够顺利安装和使用 EasyZoom 插件，并根据需要进行自定义配置和 API 调用。