jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）

前言

由于一些特殊的业务需求，通过一个多月的蛰伏及思考，我开发了这款 jQuery 图片查看器插件 Magnify，它实现了 Windows 照片查看器的全部功能，好比模态窗的拖拽、调整大小、最大化，图片的缩放、平移、旋转，键盘控制等。插件的样式都是最基础的 CSS，定制很是容易，能够轻松修改为本身喜欢的样式。随后会陆续发布 React 及 Vue 相关版本的插件。本文主要介绍插件的特色及使用方法，而关于插件开发的细节将会在以后的具体文章中说明。

Github: https://github.com/nzbin/magnify

Website: https://nzbin.github.io/magnify

开发小记

因为最近工做繁忙，几乎天天都是晚上十点到家，而后开始编写插件，睡觉时已过凌晨，现在身心俱疲。由于没有找到相关的插件，因此不少问题都是绞尽脑汁独立思考，好比以鼠标为中心缩放图片、改变弹窗大小时对图片移动的限制、图片旋转以后的缩放、平移等问题，而开发插件最让人头疼的就是细节，甚至大部分时间是在修复单一功能的 bug 。

另外，开发插件的最大难度不是功能实现，而是如何设计插件，如何让插件的使用更简单、更方便。关于如何设计插件并非本篇文章的重点，我会在以后专门写一篇介绍插件设计思想的文章。

插件全部的代码几乎都是在调整弹窗或者图片的 width、height、left、top ，因此兼容性问题不大，主要是 2D 旋转问题，IE 9 如下须要使用滤镜实现。为了方便调整样式，其中有不少相对位置的计算。

Magnify 采用了文件分离的方式编写，使用 npm 插件打包，并无使用新语法，也没有使用如今流行的打包工具。使用 npm 工具已是项目开发打包发布的一个趋势。

演示

若是你不想点开网址查看示例的话，能够经过下面的 CodePen 查看插件效果，除了视窗的大小以外，两种方式没有任何区别：

See the Pen A jQuery lightbox plugin to view images just like in Windows.

若是你的网速和其余缘由不能打开 CodePen 的话，能够查看下面的图片演示。

主要功能

Magnify 的功能能够参考 Windows 照片查看器，基本完成了能够实现的全部功能。

1.模态窗拖拽

若是图片尺寸不大于展现区域，经过图片展现区域也能够拖拽弹窗。这和 QQ 图片查看器的操做方式是相同的。

2.模态窗调整大小

能够经过参数设置模态窗的最小宽高。目前的调整大小存在一点 bug，但不影响总体的使用。

3.模态窗最大化

除了弹窗最大化，开发初期也设计了最小化的功能，但感受有些鸡肋，因此暂时没有添加。

4.图片缩放

能够经过鼠标滚轮、按钮、键盘等操做。

5.图片旋转

目前的图片旋转功能尚未添加支持 IE9 如下版本的代码。

6.键盘控制

Magnify 和 Windows 照片查看器的按键是同样的。

• ← 上一张
• → 下一张
• + 放大
• - 缩小
• ctrl + alt + 0 实际尺寸
• ctrl + , 向左旋转
• ctrl + . 向右旋转

7.全屏显示

Magnify 的全屏显示只实现了基本的展现功能，尚未实现幻灯片自动轮播的功能。全屏环境下使用键盘控制图片。

使用方法

Magnify 的使用和其余大多数 lightbox 插件的用法并无两样，若是你习惯了其它插件的使用，使用 Magnify 也不会有任何障碍。

1.须要引用的文件

<link href="/path/to/magnify.css" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

Magnify 默认使用 font-awesome 的图标，因此须要引用 font-awesome 的 css 文件。若是你想使用其它图标，能够修改 options 的 icons 参数。在以后的版本中，我可能会添加定制的字体图标文件或者使用 svg 图标。

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2.HTML 结构

Magnify 默认使用如下结构，这样的结构能够作兼容处理，也是大多数 lightbox 使用的结构。

<a data-magnify="gallery" href="big-1.jpg">
  <img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg">
  <img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg">
  <img src="small-3.jpg">
</a>

也可使用下面更简洁的结构

<img data-magnify="gallery" data-src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" data-src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" data-src="big-3.jpg" src="small-3.jpg">

Magnify 的 HTML 结构包含如下几个选项

• 添加 data-src 属性能够连接到大图。若是在 <a> 标签中使用，它会覆盖 href 属性的值。
• 添加 data-caption 属性能够显示标题。若是你不使用这个属性，插件会显示 URL 中的图片名。
• 添加 data-group 属性能够对图片分组。

3.初始化插件

若是在 HTML 中添加 data-magnify 属性，插件会自动初始化。

手动初始化插件的方法和全部 jQuery 插件同样：

$('[data-magnify=gallery]').magnify(options);

参数配置

options = {
    draggable: true,
    resizable: true,
    movable: true,
    keyboard: true,
    title: true,
    modalWidth: 320,
    modalHeight: 320,
    fixedContent: true,
    fixedModalSize: false,
    initMaximized: false,
    gapThreshold: 0.02,
    ratioThreshold: 0.1,
    minRatio: 0.1,
    maxRatio: 16,
    headToolbar: [
      'maximize',
      'close'
    ],
    footToolbar: [
      'zoomIn',
      'zoomOut',
      'prev',
      'fullscreen',
      'next',
      'actualSize',
      'rotateRight'
    ],
    icons: {
      maximize: 'fa fa-window-maximize',
      close: 'fa fa-close',
      zoomIn: 'fa fa-search-plus',
      zoomOut: 'fa fa-search-minus',
      prev: 'fa fa-arrow-left',
      next: 'fa fa-arrow-right',
      fullscreen: 'fa fa-photo',
      actualSize: 'fa fa-arrows-alt',
      rotateLeft: 'fa fa-rotate-left',
      rotateRight: 'fa fa-rotate-right'
    }
}

关于插件参数的具体含义，我就不在此复制黏贴了，请你们参考 官方文档 的详细说明，之后的参数变化不会在博客中更新。若有问题，能够在此留言。

自定义样式

由于插件的样式比较简单，因此修改起来也比较容易。除了 Windows 照片查看器，QQ 的图片查看器也很是的高大上。咱们只要简单修改就能够实现 QQ 图片查看器的效果，可是部分功能好比缩略图尚未实现。

See the Pen Magnify with another viewer style
面对这样的图片查看器足以使人心旷神怡~

总结

目前插件总体已经趋于完善，但仍然有不少须要修改及添加的细节，尤为对移动端的支持，你们能够 star 一下随时关注项目的更新动态。关于插件的介绍就再也不赘述了，若是你们发现了 Bug 或者有更好的建议，能够在 GitHub 中提问，也能够在此留言，你们的支持是我前进的最大动力！若是这款插件对你有帮助或者你在项目中使用了这款插件，欢迎留言告知！