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="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">
内容版权声明：除非注明，否则皆为本站原创文章。