【layui】图片查看器

1

先看一下文档

2

修改html

这里用箭头指向了三个地方

第一个是id：这个值是需要跟随id的变化而变化，否则就只有第一个列表可以点击，其他的就不可以

第二个就是onclick：这个事件需要把对象本身当做参数传递过去

3

js代码

js这里就是获取一个父级的属性id值，然后传递给photos即可

4

效果图

https://mparticle.uc.cn/video.html?uc_param_str=frdnsnpfvecpntnwprdssskt&wm_aid=a9573db0fde74f20bfaed55f38a64b94

补充代码

<td>

                                <div id="layer-photos-demo{$v['ft_id']}" class="layer-photos-demo">
                                    <?php foreach($v['ftp_image'] as $v1) :?>
                                    <img layer-src="{$v1}" src="{$v1}" alt="" title="">
                                    <?php endforeach;?>
                                </div>
                            </td>

//调用示例
    function photos(){
        layer.photos({
            photos: '#layer-photos-demo'
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    }
    $(".layer-photos-demo").click(function(){
        var imgArry = [];
        var id = $(this).attr('id');
        $("#"+id).find("img").each(function(){
            imgArry.push({"src": $(this).attr("src")})
        })
        layer.photos({
            photos: {
                "title": "", //相册标题
                "id": 123, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": imgArry
            } //格式见API文档手册页
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    })

​