jQuery图片查看插件Magnify开发详解


Posted in jQuery onDecember 25, 2017

前言

因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 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 查看插件效果,除了视窗的大小之外,两种方式没有任何区别:

如果你的网速和其他原因不能打开 CodePen 的话,可以查看下面的图片演示。

主要功能

Magnify 的功能可以参考 Windows 照片查看器,基本完成了可以实现的所有功能。

1.模态窗拖拽

如果图片尺寸不大于展示区域,通过图片展示区域也可以拖拽弹窗。这和 QQ 图片查看器的操作方式是相同的。

jQuery图片查看插件Magnify开发详解

2.模态窗调整大小

目前的调整大小存在一点 bug,但不影响整体的使用。

jQuery图片查看插件Magnify开发详解

3.模态窗最大化

除了弹窗最大化,开发初期也设计了最小化的功能,但感觉有些鸡肋,所以暂时没有添加。

jQuery图片查看插件Magnify开发详解

4.图片缩放

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

jQuery图片查看插件Magnify开发详解

5.图片旋转

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

jQuery图片查看插件Magnify开发详解

6.键盘控制

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

上一张 下一张 + 放大 - 缩小 ctrl + alt + 0 实际尺寸 ctrl + , 向左旋转 ctrl + . 向右旋转 7.全屏显示

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

使用方法

Magnify 的使用和其他大多数 lightbox 插件的用法并没有两样,如果你习惯了其它插件的使用,使用 Magnify 也不会有任何障碍。

1.需要引用的文件

<link href="/path/to/magnify.css" rel="external nofollow" 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="external nofollow" rel="stylesheet">

2.HTML 结构

Magnify 默认使用以下结构,这样的结构可以做兼容处理,也是大多数 lightbox 使用的结构。

<a data-magnify="gallery" href="big-1.jpg" rel="external nofollow" >
 <img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg" rel="external nofollow" >
 <img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg" rel="external nofollow" >
 <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'
  }
}

关于插件参数的具体含义,我就不在此复制黏贴了,请大家参考 官方文档 的详细说明。如有问题,可以在此留言。

自定义样式

jQuery图片查看插件Magnify开发详解

因为插件的样式比较简单,所以修改起来也非常容易。除了 Windows 照片查看器,QQ 的图片查看器也非常的高大上。我们只要简单修改就可以实现 QQ 图片查看器的效果,但是部分功能比如缩略图还没有实现。以下是实时演示:

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

总结

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

jQuery 相关文章推荐
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery实现增删改查
Dec 22 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 #jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
You might like
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python中文件操作简明介绍
2015/04/13 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python 元组操作总结
2019/09/18 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
大学军训感言800字
2014/02/27 职场文书
秋天的图画教学反思
2014/05/01 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
大二学年个人总结
2015/03/03 职场文书
家长反馈意见及建议
2015/06/03 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
机械生产实习心得体会
2016/01/22 职场文书