更新时间：2021-07-18 22:27:57
更新说明：添加自定义按钮配置项修复多个弹窗并存时的键盘事件问题
更新时间：2019-10-17 00:17:32
更新说明：添加 RTL 支持
更新时间：2019/7/15 上午9:14:26
更新说明：修复拖拽时 zIndex 的问题
更新时间：2019/5/28 上午9:04:01
更新说明：修复加载动画垂直居中、代码优化
更新时间：2019/1/7 上午9:48:09
更新说明：修复图片旋转之后切换图片的 bug
更新时间：2018/12/20 下午12:51:16
更新说明：优化图片加载显示，添加使用进度加载图片选项，其它细节优化
更新时间：2018/11/26 上午9:57:38
更新说明：修复图片缩放比例问题
更新时间：2018/10/22 上午9:46:03
更新说明：图标全部改为 svg，无须再引用 font-awesome，如需使用字体图标，可以在配置选项中修改
更新时间：2018/8/16 下午9:58:43
更新说明：添加对 IE7/IE8 旋转的支持
更新时间：2018/8/1 上午9:54:27
更新说明：修改加载动画样式、代码优化、细节调整
更新时间：2018/5/20 下午9:59:11
更新说明：修复遗留关键 bug，添加新的回调函数，代码结构调整
更新时间：2018/4/17 下午8:21:03
更新说明：修改回调函数事件名称、添加默认参数注释、bug 修复
更新时间：2018/4/16 下午1:21:26
更新说明：添加回调函数，新增 zIndex、dragHandle 等配置参数
更新时间：2018/3/26 上午9:51:41
更新说明：配置项添加及修改，细节修改，文档的演示示例可以修改插件主题及配置项
更新时间：2018/2/5 上午9:40:15
更新说明：添加动画效果、添加双击事件、bug 修复及其它细节调整
更新时间：2018/1/29 下午12:02:37
更新说明：添加移动端支持，代码优化等
更新时间：2018/1/19 上午10:52:32
更新说明：添加多实例、细节优化
更新时间：2018/1/13 下午12:53:31
更新说明：
添加新的 options
添加 grabbing 手型
添加新的演示文件
修复 bugs
更新时间：2018/1/7 下午6:55:31
更新说明：添加图片预加载动画以及细节修改
Magnify
Magnify 是一款模仿 Windows 照片查看器的 jQuery lighbox 插件。由于现在大多数的画廊插件都是以展示为主，并且都是在覆盖全屏的模态窗中，所以这些插件难以胜任以业务为主的特殊的图片查看需求。而 Magnify 实现了 Windows 照片查看器的几乎所有功能，比如模态窗的拖动、调整大小、最大化，图片的缩放、平移，键盘控制等。
使用方法
1.引入文件
1 2 3 | <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 的图标，也可以在 options 中修改
1 |
2.HTML 结构
默认使用以下结构
1 2 3 4 5 6 7 8 9 | <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> |
也可以下面的结构
1 2 3 | <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"> |
可以添加 data-src 指定大图的地址，如果添加这个属性，它会覆盖 href 的路径可以添加 data-caption 指定显示的标题可以添加 data-group 对图片进行分组
3.初始化插件
如果添加 data-magnify 的属性，插件会自动初始化
否则需要手动执行初始化代码
1 | $('[data-magnify=gallery]').magnify(options); |
详细参数请参见官网
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jquery页面滚动固定元素插件HC-Sticky
- 下一个特效： jQuery分页插件（原创）