黑马程序员技术交流社区

标题: 【广州前端】- jQuery图片查看插件Magnify [打印本页]

---

作者: dakk    时间: 2018-2-1 15:21
标题: 【广州前端】- jQuery图片查看插件Magnify


功能强大的jQuery图片查看插件Magnify

查看演示

插件描述：Magnify 是一款模仿 Windows 照片查看器的 jQuery lighbox 插件（支持 Windows 照片查看器的所有功能）

更新时间：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.引入文件

[JavaScript] 纯文本查看 复制代码

<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 中修改

[JavaScript] 纯文本查看 复制代码

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2.HTML 结构

默认使用以下结构

[JavaScript] 纯文本查看 复制代码

<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>

也可以下面的结构

[JavaScript] 纯文本查看 复制代码

<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 的属性，插件会自动初始化

否则需要手动执行初始化代码

[JavaScript] 纯文本查看 复制代码

$('[data-magnify=gallery]').magnify(options);

详细参数请参见官网

https://github.com/nzbin/magnify-lower

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2