A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 dakk 于 2018-2-1 19:20 编辑

功能强大的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);

详细参数请参见官网


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马