有时候，前端开发需要点击图片实现弹出相册效果（图片查看器），可以放大预览图片并且左右翻页切换，layer.js可以很轻松实现（layer.photos(options)）。

实现步骤

1、导入相关layer插件

页面上只需要引入jQuery（1.8以上）和layer.js即可。

2、使用方法

      2.1、json传入方式

$.getJSON('/jquery/layer/test/photos.json', function(json){
layer.photos({
photos: json
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
}); 

而返回的json需严格按照如下格式：

{
"title": "", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [
//相册包含的图片，数组格式
{
"alt": "图片名",
"pid": 666, //图片id
"src": "", //原图地址
"thumb": "" //缩略图地址
}
]
}

   2.2、直接从页面中获取图片，那么需要指向图片的父容器，并且你的img可以设定一些规定的属性（但不是必须的）

//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回调，切换图片时触发。

layer.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.js实现弹出相册效果实现步骤所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。