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

前言

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

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

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

开发小记

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

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

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

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

演示

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

See the Pen A jQuery plugin to view images just like in Windows. by Zongbin (@nzbin) on CodePen.spa

若是你的网速和其余缘由不能打开 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 by Zongbin (@nzbin) on CodePen.

面对这样的图片查看器足以使人心旷神怡~

总结

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

个人博客即将搬运同步至腾讯云+社区,邀请你们一同入驻:https://cloud.tencent.com/developer/support-plan

相关文章
相关标签/搜索