有时候,前端开发需要点击图片实现弹出相册效果(图片查看器),可以放大预览图片并且左右翻页切换,layer.js可以很轻松实现(layer.photos(options))。
实现步骤
1、导入相关layer插件
页面上只需要引入jQuery(1.8以上)和layer.js即可。
2、使用方法
2.1、json传入方式
复制代码
1
2
3
4
5
6$.getJSON('/jquery/layer/test/photos.json', function(json){ layer.photos({ photos: json ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数) }); });
而返回的json需严格按照如下格式:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14{ "title": "", //相册标题 "id": 123, //相册id "start": 0, //初始显示的图片序号,默认0 "data": [ //相册包含的图片,数组格式 { "alt": "图片名", "pid": 666, //图片id "src": "", //原图地址 "thumb": "" //缩略图地址 } ] }
2.2、直接从页面中获取图片,那么需要指向图片的父容器,并且你的img可以设定一些规定的属性(但不是必须的)
复制代码
1
2
3
4
5
6
7
8
9
10
11
12//HTML示例 <div id="layer-photos-demo" class="layer-photos-demo"> <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名"> <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名"> </div> <script> //调用示例 layer.photos({ photos: '#layer-photos-demo' ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数) }); </script>
第二种方式的图片查看器显然更加简单,因为无需像第一种那样返回规定的json,但是他们还是有各自的应用场景的,你可以按照你的需求进行选择。另外,photos还有个tab回调,切换图片时触发。
复制代码
1
2
3
4
5
6layer.photos({ photos: json/选择器, tab: function(pic, layero){ console.log(pic) //当前图片的一些信息 } });
3、相关链接
http://layer.layui.com/
http://www.cnblogs.com/my-freedom/p/6656017.html
最后
以上就是高兴彩虹最近收集整理的关于layer.js实现弹出相册效果实现步骤的全部内容,更多相关layer内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复