因为一些特殊的业务需求,颠末一个多月的冬眠及思考,我开发了这款 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. by Zongbin (@nzbin) on CodePen.
如果你的网速和其他原因不能打开 CodePen 的话,可以检察下面的图片演示。
主要成果Magnify 的成果可以参考 Windows 照片检察器,根基完成了可以实现的所有成果。
1.模态窗拖拽如果图片尺寸不大于展示区域,通过图片展示区域也可以拖拽弹窗。
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 图标。