今天需要做个图片弹出浮层，当点击小图时，可以弹出个大图的浮层弹窗，并且在多图的情况下可以左右切换。

我第一反应是layerjs中有个layer.photos可以实现如上的效果，并且还自带左右切换的效果。后来去官网看了文档，大致用法如下：

一、用法一

1. 
   

2. //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>

3. 
   

4. 
   

5. <script>
       //调用示例
       layer.photos({
           photos: '#layer-photos-demo'
           ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
       });
   </script>

这里只需要在div中添加个id，在div中定义的图片需要定义layer-src属性，因为layer.photos读取的是layer-src中的图片路径。

但有个问题，我这里使用的是<ul><li>结构，div中嵌套的是ul结构，并且不是所有的li都是img结构。我第一个反应是想通过在页面中组装成这种div结构，然后把它们都隐藏显示，点击的时候再调用对应的方法。

后来我也实现了，这里有个问题，页面要额外加载好多个img，额外增加了网页的负担，而且还多了好多个div结构。仔细看官方文档，发现官方文档有个额外的使用方法。

二、用法二

1. layer.photos({
       photos: json/选择器,
       tab: function(pic, layero){
           console.log(pic) //当前图片的一些信息
       }
   });

通过json格式来调用layer.photos，这里的数据要拼成json格式，格式要满足下面要求：

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

这里除了data和其中的src不能省略，其他的数据都可有可无。

这里我使用的方法是在点击的图片中定义一个方法gogopic()，将数据在php端拼装，然后赋在方法参数中gogopic(json)。然后在javascript中定义个gogopic()方法，把上面的使用方法挪进去就可以了。

附上我的php组装json代码：

foreach ($list as $k => $v) {
    $pics = array(
        'title' => $v['p_name'],
    );
    $pics['data'][] = array(
        'src' => C('img_vr_site') . $v['small_pic'],
    );
    foreach ($v['pictureurl'] as $m) {
        $pics['data'][] = array(
            'src' => C('img_vr_site') . $m,
        );
    }
    $list[$k]['json'] = json_encode($pics);
}

这里的list[][json]就是拼装成的json格式数据，在前台页面通过循环就可以一个个赋值到参数中，就可以实现layer的图片浮层弹窗了。