jQuery weui Photo Browser 点击小图显示对应的大图

淩亂°似流年 2021-09-16 14:36 358阅读 0赞

官网上只提供了点击按钮显示图片浏览。

但有时候我们需要点击对应的图片，显示大图

我在网上也找了好多，但关于jQuery weui Photo Browser图片动态加载的博客很少，本人菜鸟，自己琢磨出来了简单的方法，如果有更好的方法请赐教，谢谢

![70][]

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)
                })

[70]: /images/20210724/f20dca8e21c04946851d380847723ea4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，358人围观）

还没有评论，来说两句吧...

相关阅读

相关 layer.photos 实现查看大图

layer.photos({ photos: { "data": [{"src": 'http://pic1a.nipic.com/2009-0

水深无声/ 2023年10月18日 22:31/ 0 赞/ 120 阅读

相关仿淘宝点击小图出现大图效果

<div class="bigger"> <img src="images/bigger.png

傷城~/ 2023年08月17日 17:20/ 0 赞/ 47 阅读

相关点击小图查看大图的定位功能

用户点击小图一般是要查看小图放大后的大图，或者鼠标移到小图后想要查看详细的信息的大图，这时候要考虑大图的定位问题，以下代码可以参考（需要引入 `jq` ）： // 小

柔光的暖阳◎/ 2022年10月11日 03:37/ 0 赞/ 293 阅读

相关功能强大漂亮的js图片相册,js点击小图显示大图

原生js点击图片触发弹窗页面显示模糊的小图片(small\_X.jpg)，点击全屏显示高清大图片(large\_X.jpg) 可实现放大、缩小、拖拽、旋转、上一张、下一张

迷南。/ 2022年09月12日 01:54/ 0 赞/ 234 阅读

相关点击Gallery弹出对应的Gallery大图

今天遇到了这么一个问题，给3个相应的缩略图，点击缩略图弹出的相应的缩略图片的大图。解决办法：setSelection，注意这个方法是Gallery的。（下面代码功

╰+攻爆jí腚メ/ 2022年08月14日 05:47/ 0 赞/ 222 阅读

相关 Android浏览图片，点击查看大图

首先，从图片缩略界面跳转到图片详情页面，应该是从一个Activity跳转到另外一个Activity，应该图片详情页面也有很多操作，用View或者Dialog不是很好。所以现在难

末蓝、/ 2022年07月11日 05:33/ 0 赞/ 524 阅读

相关 JQuery鼠标移到小图显示大图效果的方法

JQuery鼠标移到小图显示大图效果的方法本文实例讲述了JQuery鼠标移到小图显示大图效果的方法。分享给大家供大家参考。具体分析如下：这里的显示大图功能类似上一篇

墨蓝/ 2022年03月29日 15:22/ 0 赞/ 274 阅读

相关点击小图切换大图

点击任意一张图片都会变大，并显示在下方指定处。 <!DOCTYPE html> <html lang="en"> <head> <me

以你之姓@/ 2022年02月27日 13:54/ 0 赞/ 353 阅读

相关 jQuery weui Photo Browser 点击小图显示对应的大图

官网上只提供了点击按钮显示图片浏览。但有时候我们需要点击对应的图片，显示大图我在网上也找了好多，但关于jQuery weui Photo Browser图片动态加载的博

淩亂°似流年/ 2021年09月16日 14:36/ 0 赞/ 359 阅读

相关点击缩略图模态框显示大图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>close</title> ...

小鱼儿/ 2021年05月03日 02:55/ 0 赞/ 589 阅读