jQuery weui Photo Browser 點選小圖顯示對應的大圖
阿新 • • 發佈:2018-12-14
官網上只提供了點選按鈕顯示圖片瀏覽。
但有時候我們需要點選對應的圖片,顯示大圖
我在網上也找了好多,但關於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) })