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

所属分类:媒体,UI-图片展示,弹出层
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8
更新时间: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,也可自行改写
  图片展示
 21508  46

简易的jQuery无缝滚动(原创)

简易无缝滚动,只需要改变高度(不用设宽度)嗯,或许看看就知道是不是你想要的
  图片展示
 1266  18

HTML5/CSS3超酷焦点图手机1946韦德最新网站

焦点图伟德BETVICTOR切换效果比较简单,但是外观和功能却十分强大。该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图伟德BETVICTOR还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用。
  图片展示
 9877  23

纯js图片旋转

JavaScript图片手机1946韦德最新网站
  图片展示
 12948  101

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

    月小淡眉弯。 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之后会添加多实例选项,这样就可以了
    回复
    风景颜,不记年! 0
    2018/1/4 16:56:41
    ie8里面的旋转不行
        nzb3290
        2018/1/5 21:59:18
        IE8 功能受限,请关注官网的更新动态
        nzb3290
        2018/1/14 23:17:30
        这个支持 IE8https://github.com/nzbin/magnify-lower
    回复
取消回复