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 plugin to view images just like in Windows. by Zongbin (@nzbin) on CodePen.
如果你的网速和其他原因不能打开 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
转载于:https://www.cnblogs.com/nzbin/p/8098461.html
jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)相关推荐
- 解决图片无法打开的问题: “Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足”
OS : Win7 X64 问题描述: 双击打开一幅微信另存的 jpg 图片时,无法打开提示如下,但用其他看图软件或IE查看没有问题,正常的. Windows 照片查看器无法显示此图片,因为计算机上的 ...
- 解决:Windows照片查看器无法显示此图片,因为计算机上的可用内存可能不足的问题
在电脑上打开微信中接收的图片或从手机上截屏的图片,如果使用Windows照片查看器查看的话,有时会打不开,并有如下提示: Windows照片查看器无法显示此图片,因为计算机上的可用内存可能不足.请关闭 ...
- 前端开发不容错过的jQuery图片滑块插件(转)
作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQu ...
- [置顶] Web开发百宝箱——提升网站档次的时尚 jQuery 图片滚动插件
这篇文章向大家推荐8款时尚的 jQuery 图片滚动插件.jQuery 是最流行和使用最广泛的 JavaScript 框架,它可以让帮助你在你的项目中加入一些很炫的图片滚动效果.希望这些插件对你有所帮 ...
- 十个jQuery图片画廊插件推荐
2019独角兽企业重金招聘Python工程师标准>>> jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuer ...
- Jquery 图片浏览插件
原文来源:http://www.techolics.com 在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 精心挑选的23款美轮美奂的 jQuery 图片特效插件
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
- Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
最新文章
- mysql数据源找不到_mysql报出找不到目标数据源为啥? 同一个方法在其他地方调用正常...
- Spring Boot 热部署入门
- 哪个Java线程消耗了我的CPU?
- Java Collections list()方法与示例
- OpenCL 第7课:旋转变换(1)
- 用if语句表达区间分支
- MySQL—Mysql与MariaDB启停命令的区别
- Java LocalDateTime
- mpacc和计算机硕士,考MPAcc还是工作?读研三年VS工作三年对比!
- python 公司教程_最全Python快速入门教程,满满都是干货
- python音频处理库_python音频处理
- 苦口婆心一考拉|向沉迷游戏的中(大)学生讲解内存和磁盘
- 信息与计算机科学讲座,【创新创业 计科在行动】2015级信息与计算科学专业大学生创新讲座、专业教育讲座暨学术前沿讲座专题报道...
- Vmware虚拟机三种网络模式详解
- Allegro模块布局和布局复用
- C语言第二课:项目的创建、基本结构与两个常见问题的处理
- Navicat 入门教程
- CSS-- 精灵图和字体图标
- 手术分级标准目录2020_2020年3月份即将实施国家标准目录(四)
- python计算圆周率近似值_使用MicroPython计算任意位数圆周率