前言

因为一些特殊的业务需求，经过一个多月的蛰伏和思考，我开发了这款jQuery照片查看器插件amplife，实现了Windows照片查看器的所有功能，如拖动、调整大小和最大化模态窗口，图片的缩放、旋转、平移和键盘控制。插件的样式是最基础的CSS，非常容易定制，可以很容易修改成自己喜欢的样式。与React和Vue相关的插件会陆续发布。本文主要介绍插件的特点和用法，插件开发的细节将在后面的具体文章中进行说明。

https://github.com/nzbin/magnify捷信：

https://nzbin.github.io/magnify网站：

发展说明

最近工作比较忙，每天10: 00到家，然后开始写插件。我上床睡觉时已经过了凌晨，现在我身心俱疲。因为没有找到相关插件，很多问题都在绞尽脑汁独立思考，比如以鼠标为中心缩放图片，在弹出窗口较大时改变运动图片的限制，旋转后缩放平移图片等。但是开发插件最麻烦的是细节，甚至很多时候都是用单一的功能修复bug。

另外，开发插件最大的困难不是功能实现，而是如何设计插件，如何让插件的使用更简单方便。如何设计插件不是本文的重点，后面我会专门写一篇关于插件设计思路的文章。

几乎所有的插件代码都是在调整弹出窗口或图片的宽度、高度、左上方，所以兼容性问题不大，主要是2D旋转问题，需要用IE 9以下的滤镜来实现。为了方便调整样式，有许多相对位置计算。

放大是通过分离文件编写的，并由npm插件打包，而不使用新的语法和流行的打包工具。使用npm工具已经成为项目开发和包发布的一种趋势。

示范

如果不想点击网址查看示例，可以通过下面的CodePen查看插件效果。除了窗口的大小，这两种方法没有区别：

如果你的网速等原因无法打开CodePen，可以查看下图。

主要功能

放大的功能可以参考Windows Photo Viewer，基本上完成了所有可以实现的功能。

1.模式窗口拖放

如果图片大小不大于显示区域，也可以通过图片显示区域拖动弹出窗口。这与QQ图片查看器的工作方式相同。

2.调整模式窗口的大小

当前的大小调整有bug，但不影响整体使用。

3.最大化模态窗口

除了弹出窗口最大化之外，开发初期也设计了最小化功能，但是感觉有点鸡肋，所以暂时没有添加。

4.图像缩放

可以通过鼠标滚轮、按钮、键盘等进行操作

5.图像旋转

目前图像旋转功能还没有添加支持以下版本IE9的代码。

6.键盘控制

放大和视窗照片查看器有相同的按钮

上一个下一个放大-缩小ctrl alt 0实际大小ctrl，向左旋转ctrl。向右旋转。7.全屏显示

放大镜的全屏显示只实现了基本的显示功能，并没有实现幻灯片的自动旋转。全屏环境下用键盘控制图片。

施用方式

放大的使用与大多数其他灯箱插件没有什么不同。如果你习惯了使用其他插件，使用放大就不会有障碍。

1.要引用的文件

link href='/path/如果要使用其他图标，可以修改选项的图标参数。在以后的版本中，我可能会添加自定义字体图标文件或使用svg图标。

链接href=' https://cdn . bootscs.com/font-awesome/4 . 7 . 0/CSS/font-awesome . min . CSS ' rel=' external nofollow ' rel='样式表' 2.html结构

默认情况下，放大使用以下结构，这可以兼容，也是大多数灯箱使用的结构。

a数据-放大=' gallery ' href=' big-1 . jpg ' rel=' external nofollow ' img src=' http 3360 mall-1 . jpg '/aa数据-放大=' gallery ' href=' big-2 . jpg ' rel=' external nofollow ' img src=' http 3360 mall-2 . jpg '/Aadata-放大=' gallery ' href=' big-3 . jpg ' rel=' external nofollow ' img src=' http 33333

img数据-放大=' gallery ' data-src=' http : big-1 . jpg ' src=' http : small-1 . jpg ' img数据-放大=' gallery ' data-src=' http : big-2 . jpg ' src=' http 3360 small-2 . jpg '的HTML结构img数据-放大=' gallery ' data-src=' http : big-3 . jpg ' src=' http

添加data-src属性以链接到更大的图像。如果在a标记中使用，它将重写href属性的值。添加数据标题属性以显示标题。如果不使用此属性，插件将在URL中显示图片名称。将数据组属性添加到图片组中。3.初始化插件

如果将数据放大属性添加到HTML中，插件将自动初始化。

手动初始化插件与所有jQuery插件相同：

$('[数据放大=图库]')。放大(选项)；参数配置

options={ draggable: true，resizable: true，movable: true，keyboard: true，title: true，modalWidth: 320，modalWidth: 320，fixedContent: true，fixedModalSize: false，initMaximized: false，gapThreshold: 0.02，比率阈值33330 right rotate right : ' fa fa-rotate-right ' } }这里我就不复制粘贴插件参数的具体含义了，请参考官方文档的详细描述。 如果你有任何问题，可以在这里留言。

自定义样式

因为插件样式比较简单，修改起来也很容易。除了Windows照片查看器，QQ的照片查看器也很高。我们只需要简单的修改就可以达到QQ图片查看器的效果，但是缩略图等一些功能还没有实现。以下是现场演示：

面对这样的画面观者就足以让人感到心旷神怡~

摘要

目前插件已经整体完善，但是还有很多细节需要修改和补充，尤其是对于移动终端的支持，可以随时关注项目的更新。我不再重复插件的介绍。如果发现bug或者有更好的建议，可以在GitHub提问或者在这里留言。大家的支持是我进步的最大动力！如果这个插件对你有帮助或者你在项目中使用了这个插件，请留言！