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

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

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

更新时间: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);

详细参数请参见官网

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

仿微信朋友圈图片展示效果

仿微信朋友圈图片展示效果
  图片展示
 26247  144

jquery3D旋转相册

jquery3D旋转相册
  图片展示
 17541  146
  图片展示
 19485  100

HTML5卡片人物介绍动画展示效果

HTML5卡片人物介绍动画展示效果ie9和ie10没有测试,ie8以下不支持。基于bootstrap框架制作
  图片展示
 15349  149

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

    月小淡眉弯。 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 图片查看器双击也是出现多个,插件之后会添加多实例选项,这样就可以了
    回复
    风景颜,不记年! 0
    2018/1/4 16:56:41
    ie8里面的旋转不行
        nzb3290
        2018/1/5 21:59:18

        IE8 功能受限,请关注官网的更新动态

        nzb3290
        2018/1/14 23:17:30

        这个支持 IE8

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

    回复
取消回复