-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-06-28
来源 ：
阅读 1527
评论 0
摘要：magnify.js是一款jQuery图片查看插件。magnify.js插件以lightbox的方式来展示图片，并且lightbox窗口可以自由的拖动，图片可以缩放，旋转，最大化等，功能非常强大。希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
简要教程
magnify.js是一款jquery图片查看插件。magnify.js插件以lightbox的方式来展示图片，并且lightbox窗口可以自由的拖动，图片可以缩放，旋转，最大化等，功能非常强大。该jquery图片查看插件的其它特点有：
o lightbox模态窗口可以自由拖动，修改尺寸和全屏最大化。
o 可以使用鼠标来移动图片进行查看。
o 可以使用鼠标或功能按钮来缩放图片。
o 图片可以进行旋转。
o 支持键盘控制。
o 响应式设计。
使用方法
在页面中引入magnify.css，jquery和jquery.magnify.js文件。另外插件使用font-awesome字体图标作为界面的小图标。
<link href="/path/to/font-awesome.min.css" rel="stylesheet"> <link href="/path/to/magnify.css" rel="stylesheet"> <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.magnify.js"></script>
初始化插件
该jquery图片查看器的默认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-2jpg"> </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-*属性还有：
o data-src：该属性是大图的url地址。
o data-caption：该属性用于显示图片的标题。
o data-group：该属性用于对图片进行分组。
初始化插件
如果你在HTML代码中添加了data-magnify属性，那么你不用编写任何的js初始化代码。
你也可以通过下面的js代码来手动初始化该jquery图片查看插件。
$("[data-magnify=gallery]").magnify();
配置参数
该jquery图片查看插件的可用配置参数有：
o draggable：是否允许拖动lightbox模态窗口。默认值为：true。
o resizable：是否允许修改lightbox模态窗口的大小。默认值为：true。
o movable：是否允许图片进行拖动。默认值为：true。
o keyboard：是否允许使用键盘来进行控制。默认值为：true。
o ←：前一张图片。
o →：下一张图片。
o +：图片放大。
o -：图片缩小。
o ctrl + alt + 0：图片的实际尺寸。
o ctrl + ,：向左旋转图片。
o ctrl + .：向右旋转图片。
o title：是否显示图片的标题。默认值为：true。
o fixedModalSize：如果为true，初始化是模态窗口的尺寸将跟随图片尺寸进行缩放。默认值为：false。
o modalWidth：模态窗口的宽度。默认值为320。只有fixedModalSize选项为true时可用。
o modalHeight：模态窗口的高度。默认值为320。只有fixedModalSize选项为true时可用。
o gapThreshold：如果模态窗口大于浏览器窗口，会产生一个间隙。默认值为0.02。
o ratioThreshold：图片是否的比例，默认值为0.01。
o minRatio：显示图片的最小比例。默认值为0.1（10%）。
o maxRatio：显示图片的最大比例。默认值为16（1600%）。
o icons：图标的class类。
o fa fa-window-maximize：最大化。
o fa fa-close：关闭。
o fa fa-search-plus：放大。
o fa fa-search-minus：缩小。
o fa fa-arrow-left：前一张图片。
o fa fa-arrow-right：下一张图片。
o fa fa-photo：全屏。
o fa fa-arrows-alt：图片的实际尺寸。
o fa fa-rotate-left：向左旋转。
o fa fa-rotate-right：向右旋转。
o toolbar：底部工具栏上显示的按钮。['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']
本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端jQuery频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
