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

所属分类:媒体,UI-图片展示,弹出层

功能强大的jQuery图片查看插件Magnify ie兼容8

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

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

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

2.HTML 结构

默认使用以下结构

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

可以添加 data-src 指定大图的地址,如果添加这个属性,它会覆盖 href 的路径可以添加 data-caption 指定显示的标题可以添加 data-group 对图片进行分组

3.初始化插件

如果添加 data-magnify 的属性,插件会自动初始化

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

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

详细参数请参见官网

相关插件-图片展示,弹出层

360度全景展示效果

按下鼠标左键拖拽360度全景展示效果
  图片展示
 11320  121

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 23544  47

JQ插件 放大镜 对比图 倍数可选

放大镜进行两张图片对比功能,可选放大倍数
  图片展示
 4234  38

纯js写的祝愿墙

这是一款纯js编写的祝愿墙,墙上的祝福标签的位置随机出现,每次刷新,出现的位置各不相同。
  图片展示
 5590  45

讨论这个项目(26)回答他人问题或分享插件使用方法奖励jQ币

    JongHengYin 0
    2018/4/14 20:51:27
    想问一下 将您的文件引用到我的文件中 为什么只有显示图片 没有底下缩小放大旋转那一排按钮啊?
        nzb3290
        2018/4/15 23:45:05
        是不是没引 font-awesome 图标
    回复
    dreampasssser 0
    2018/4/12 16:50:45
    您这个支持多实例是什么意思呢?我现在的需求是一个页面上会有多个图片组,每个图片组要单独使用一个查看器,但是我就算给图片组使用唯一的id去找里面的a[data-magnify],虽然找到的是正确的,但是点击展示的时候点击下一张会把所有的图片都过一遍,只有最后一个图片组不会这样,而且第一个图片组点击下一张时还会报错,jquery.magnify.js:611 Uncaught TypeError: Cannot read property 'src' of undefined
    at Magnify.jumpTo (jquery.magnify.js:611)
    at Magnify.jump (jquery.magnify.js:596)
    at HTMLButtonElement.<anonymous> (jquery.magnify.js:917)
    at HTMLButtonElement.dispatch (jquery.min.js:3)
    at HTMLButtonElement.r.handle (jquery.min.js:3)

    楼主能看看怎么回事吗?
        nzb3291
        2018/4/13 13:05:09
        有一个 data-group 属性就是分组用的,可以将不同的图片组分组,比如 data-group="a"、data-group="b"
    回复
    ? 辰夜 ? 0
    2018/4/3 16:22:17
    连续点击,出现多窗口图片,之前打开的窗口图片,再次点击,图片窗口不能显示在最前面
        nzb3290
        2018/4/11 10:20:43
        请关注官网的更新
    回复
    凉忆々亦凉心 0
    2018/3/20 14:13:08
    可不可以一出现图片,那些放大旋转按钮就直接在下面啊,不用点击一下才出现这些效果?这两天要用,比较急,可以回复一下吗?谢谢,或者我原本放图片的位置让你这个显示图片的窗体代替,那路径怎么传啊,让你这个窗体直接固定在我原本显示图片的地方,这个能在这个代码的基础上改啊?如何可以的话告诉我一声,谢谢啊
        nzb3290
        2018/3/23 10:14:39
        你看看这个插件符合你的要求吗
        https://github.com/jackmoore/wheelzoom
    回复
    adammao 0
    2018/3/18 13:59:27
    也是不显示图标,引用了fontawesome,初始化插件出问题了,这里怎么修改呢$('[data-magnify]').magnify(
        nzb3290
        2018/3/23 10:15:55
        解决了吗
    回复
    换了感觉 0
    2018/2/6 17:10:23

    你好我问下 

    <img datamagnify="gallery" datasrc="big1.jpg" src="small1.jpg">

    datasrc可以是动态请求吗?我后台通过流的方式输出图片行吗

        nzb3290
        2018/2/6 17:35:57
        试了一下,可以的
    回复
    TTboy 0
    2018/2/6 13:59:10
    为什么放大图片框按钮的图标都没了
        nzb3290
        2018/2/6 14:45:34
        是不是没引 fontawesome 图标?
    回复
    lijianeng10 0
    2018/1/26 10:53:10

    为什么我用报错了呢

        nzb3290
        2018/2/6 19:46:04
        具体是什么错
    回复
    月小淡眉弯。 0
    2018/1/17 10:21:35

    这个有双击显示大图的事件吗?

        nzb3291
        2018/1/17 10:29:50

        暂时还没有,主要是因为浏览器端很少有双击事件,不过插件后期可能会添加双击事件的选项吧

        月小淡眉弯。0
        2018/1/17 11:19:54

        好吧  谢谢

    回复
    月小淡眉弯。 0
    2018/1/17 10:20:17

    这个有bug呀 连续点击就会出现很多张  还有在点击图他图片的时候之前点击的那张的大图应该移除呀

        nzb3290
        2018/1/17 10:25:59
        这个插件支持多实例,所以出现多个是正常的。该功能参考 Windows 图片查看器。
        月小淡眉弯。0
        2018/1/17 11:21:28

        但是连续一直点一张图片的时候也会出现很多张呀  然后关闭也要相应点击很多次才能关掉  这种应该不太好吧

        nzb3291
        2018/1/17 12:03:50
        Windows 图片查看器双击也是出现多个,插件之后会添加多实例选项,这样就可以了
    回复
取消回复