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

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

 11293  62  查看评论 (45)
功能强大的jQuery图片查看插件Magnify ie兼容8

更新时间:2018/5/20 下午9:59:11

更新说明:修复遗留关键 bug,添加新的回调函数,代码结构调整


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

详细参数请参见官网

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

jquery3D旋转幻灯片插件

jquery幻灯片插件带滚动条的圆形立体图片旋转滚动
  图片展示
 19487  79

立体图片展示

图片随鼠标转向
  图片展示
 12145  164

纯js写的祝愿墙

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

jQuery支持图片放大缩小查看效果

e-smart-zoom-jquery.js插件 页面上提供了两个按钮,可以让你的图片点击放大或者缩小 当然,对于懒人来说,真是懒得点击 那么你可以将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果
  图片展示
 75518  180

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

    末归 0
    2018/6/8 10:42:21
    你好,请问下可以在打开查看器的同时判断下如果已打开一个查看器则关闭上一个再打开,就是打开之前是否可以回调关闭的方法
        nzb3290
        2018/6/10 15:22:30
        可以使用插件的回调函数
        末归0
        2018/6/11 13:59:16
        multiInstances禁用多实例化就可以了是吧
    回复
    0
    2018/5/31 17:47:55
    将another-viewer-style.html例子搬到项目使用的时候,旋转之后图片后放大和缩小的功能就出现问题
        nzb3290
        2018/5/31 17:51:49
        建议从官网下载最新代码
        0
        2018/6/1 8:22:12
        Bootstrap 和Jq的版本有要求的么
        nzb3290
        2018/6/1 17:26:50
        和 bootstrap 没有关系,只要 jquery 的版本不是太低就可以
        0
        2018/6/4 14:25:32
        使用demo里的jq可以,但使用我本地项目的jq不行,我本地的是3.1.1
    回复
    Lover1nLynn 0
    2018/5/29 16:57:59
    问一下,如果是 通过append(),好像就会自动初始化.自己设置的参数无效
        nzb3290
        2018/5/30 12:06:27
        为什么 append,问题可以具体一点
    回复
    珠穆雪峰? 0
    2018/5/9 15:30:22
    font-awesome.css这个图标的引用文件能不能单独提取出来,或者把它单独整理出来,不然联网才能看到图标
        nzb3290
        2018/5/10 10:01:05
        可以将文件下载下来,放到自己的目录中
        珠穆雪峰?0
        2018/5/10 10:40:41
        我指的是光下载font-awesome.css这个是无效的,对应的切图都没有啊,我想要一整套,不好找,哈哈...谢谢大神的回复!
        WanHu0
        2018/5/16 11:53:38
        除了CSS文件,还需要相应的tff文件;你可以在fa的这个网址看看:http://fontawesome.dashgame.com/
    回复
    ?? 0
    2018/5/2 11:12:14
    放大图片没有图标,我也引了 font-awesome.css文件。
        nzb3290
        2018/5/3 10:34:45
        看一下引用的 font-awesome 的版本,老版本可能没有这几个图标
        ??0
        2018/5/4 11:22:57
        引用的就是新版本的
    回复
    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
        珠穆雪峰?0
        2018/5/9 15:33:42
        jQuery有自带触发事件,可以页面加载时触发图片的click事件.
    回复
    adammao 0
    2018/3/18 13:59:27
    也是不显示图标,引用了fontawesome,初始化插件出问题了,这里怎么修改呢$('[data-magnify]').magnify(
        nzb3290
        2018/3/23 10:15:55
        解决了吗
    回复
取消回复