UI | 韦德1946手机版客户端 | 媒体 | 导航 | 其他 | 网页模板| 常用代码| 在线代码

伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类：媒体,UI-图片展示,弹出层
 8574  49  查看评论 (26)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8
 查看演示  website  立即下载
更新时间：2018/4/17 下午8:21:03更新说明：修改回调函数事件名称、添加默认参数注释、bug 修复
更新时间：2018/4/16 下午1:21:26更新说明：添加回调函数，新增 zIndex、dragHandle 等配置参数
更新时间：2018/3/26 上午9:51:41更新说明：配置项添加及修改，细节修改，文档的演示示例可以修改伟德BETVICTOR主题及配置项
更新时间：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 伟德BETVICTOR。由于现在大多数的画廊伟德BETVICTOR都是以展示为主，并且都是在覆盖全屏的模态窗中，所以这些伟德BETVICTOR难以胜任以业务为主的特殊的图片查看需求。而 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="http://yzshield.com/quot;big-1.jpg">"   <img src="small-1.jpg"> </a> <a data-magnify="gallery" href="http://yzshield.com/quot;big-2.jpg">"   <img src="small-2.jpg"> </a> <a data-magnify="gallery" href="http://yzshield.com/quot;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.初始化伟德BETVICTOR如果添加 data-magnify 的属性，伟德BETVICTOR会自动初始化否则需要手动执行初始化代码$('[data-magnify=gallery]').magnify(options);详细参数请参见官网
相关伟德BETVICTOR-图片展示,弹出层
查看更多

图片点击放大并居中显示

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

jQuery动态缩放焦点图

 jQuery动态缩放焦点图
  图片展示
 10588  79

纯js写的祝愿墙

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

360度全景展示效果

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

讨论这个项目（26）回答他人问题或分享伟德BETVICTOR使用方法奖励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
        你看看这个伟德BETVICTOR符合你的要求吗
        https://github.com/jackmoore/wheelzoom
    回复
    adammao 0
    2018/3/18 13:59:27
    也是不显示图标，引用了fontawesome，初始化伟德BETVICTOR出问题了，这里怎么修改呢$('[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
        暂时还没有，主要是因为浏览器端很少有双击事件，不过伟德BETVICTOR后期可能会添加双击事件的选项吧
        月小淡眉弯。0
        2018/1/17 11:19:54
        好吧  谢谢
    回复
    月小淡眉弯。 0
    2018/1/17 10:20:17
    这个有bug呀 连续点击就会出现很多张  还有在点击图他图片的时候之前点击的那张的大图应该移除呀
        nzb3290
        2018/1/17 10:25:59
        这个伟德BETVICTOR支持多实例，所以出现多个是正常的。该功能参考 Windows 图片查看器。
        月小淡眉弯。0
        2018/1/17 11:21:28
        但是连续一直点一张图片的时候也会出现很多张呀  然后关闭也要相应点击很多次才能关掉  这种应该不太好吧
        nzb3291
        2018/1/17 12:03:50
        Windows 图片查看器双击也是出现多个，伟德BETVICTOR之后会添加多实例选项，这样就可以了
    回复
查看更多评论
取消回复