【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參數）
        });
    })

​