基于layer实现的多张图片浮层弹窗实现与左右切换效果
2017-03-04| 程成| 3418| 4| jQuery/JS

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


image.png


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



一、用法一



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


  2. <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的图片浮层弹窗了。



×
作者:程成
QQ:492245711