1. 程式人生 > >jQuery weui Photo Browser 點選小圖顯示對應的大圖

jQuery weui Photo Browser 點選小圖顯示對應的大圖

官網上只提供了點選按鈕顯示圖片瀏覽。

但有時候我們需要點選對應的圖片,顯示大圖

我在網上也找了好多,但關於jQuery weui Photo Browser圖片動態載入的部落格很少,本人菜鳥,自己琢磨出來了簡單的方法,如果有更好的方法請賜教,謝謝

var listp=[];//建立陣列,儲存圖片連結
    $.showLoading();
    $.ajax({
            url: "/health/api/v2/checkReport/getDetailAll",
            type: "get",
            dataType: "json",
            // beforeSend:index,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("token", token);
                xhr.setRequestHeader("Content-Type", 'application/json');
            },
            data:{
                "pId":pid,
                "pCode":pcode 
            },
            success: function (data) {
                $.hideLoading();
                if(data.code=="OK"){
                    var html="";
                    var imglist="";
                    for(var i=0;i<data.body.pList.length;i++){
                        html+='<a href="#list'+i+'" id="list'+i+'"><div class="re_content_list" id="list'+i+'">'
                                +'<div class="re_cont_h">'
                                +data.body.pList[i].titleName
                                +'</div>'
                                +'<div class="re_cont_t">'
                                +data.body.pList[i].desc
                                +'</div>'
                                +'</div></a>'
                    }
                    $(".re_content_list").html(html);
                    for(var i=0;i<data.body.picList.length;i++){
                        listp.push("/health/api/v2/checkReport/downloadPhyPic?uId="+data.body.picList[i]+"");//push到陣列中
                        imglist+='<img   class="imgborw" data-index="'+i+'"  src="/health/api/v2/checkReport/downloadPhyPic?uId='+data.body.picList[i]+'" width="80px">'
                    }
                    console.log(listp);
                    $(".imglist").html(imglist);
                    click_scroll(list)
                    
                   
                }
            },
            error: function (data) {

            }
        });
        function showBigImg(list,index) {
            imgList = list.split(',');
            $.photoBrowser({items: imgList}).open(index);
        }
        $("body").on("click",".imgborw",function(){
                var href=listp.join(",");//將陣列轉換成字串,我在這糾結了好半天各種問題
                var index=$(this).attr("data-index");//開啟對應大圖
                showBigImg(href,index)
            })