今天需要做个图片弹出浮层,当点击小图时,可以弹出个大图的浮层弹窗,并且在多图的情况下可以左右切换。
我第一反应是layerjs中有个layer.photos可以实现如上的效果,并且还自带左右切换的效果。后来去官网看了文档,大致用法如下:
//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>
这里只需要在div中添加个id,在div中定义的图片需要定义layer-src属性,因为layer.photos读取的是layer-src中的图片路径。
但有个问题,我这里使用的是<ul><li>结构,div中嵌套的是ul结构,并且不是所有的li都是img结构。我第一个反应是想通过在页面中组装成这种div结构,然后把它们都隐藏显示,点击的时候再调用对应的方法。
后来我也实现了,这里有个问题,页面要额外加载好多个img,额外增加了网页的负担,而且还多了好多个div结构。仔细看官方文档,发现官方文档有个额外的使用方法。
layer.photos({ photos: json/选择器, tab: function(pic, layero){ console.log(pic) //当前图片的一些信息 } });
通过json格式来调用layer.photos,这里的数据要拼成json格式,格式要满足下面要求:
{ "title": "", //相册标题 "id": 123, //相册id "start": 0, //初始显示的图片序号,默认0 "data": [ //相册包含的图片,数组格式 { "alt": "图片名", "pid": 666, //图片id "src": "", //原图地址 "thumb": "" //缩略图地址 } ] }
这里除了data和其中的src不能省略,其他的数据都可有可无。
这里我使用的方法是在点击的图片中定义一个方法gogopic(),将数据在php端拼装,然后赋在方法参数中gogopic(json)。然后在javascript中定义个gogopic()方法,把上面的使用方法挪进去就可以了。
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的图片浮层弹窗了。