jQuery weui Photo Browser 点击小图显示对应的大图_jquery weui 图片_汤玉鹏的博客-程序员秘密

技术标签: JavaScript  html  

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

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

我在网上也找了好多,但关于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)
            })

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_27318177/article/details/82999849

智能推荐

Hexo搭建个人博客(三)主题美化篇_Luca Lau的博客-程序员秘密

从此,在个性化的路上一去不回头……

Appium基础篇13-无法定位app内webview页面元素_appium android.webkit.webview无法定位输入_Anthony_tester的博客-程序员秘密

本文来讨论一个无法绕过的问题,就是app内webview页面的元素定位。现在做过app测试的朋友就知道,app里面页面有原生和webview的,或者H5的。今天,就来讨论一个目前还没有解决的问题。1.手机百度搜索结果页面手机百度,点击搜索输入框,输入关键字点击搜索,出来的搜索结果页面,无法通过UI automator viewer来定位元素。        移动框选区域,发现无法框选

Mockito自动化测试_Pioneer4的博客-程序员秘密

文章目录概述搭建mock测试环境SpringBoot测试区别概述Mockito是根据MIT许可证发布的Java开源测试框架。该框架允许在自动化单元测试中创建测试双重对象(模拟对象),以达到测试驱动开发(TDD)或行为驱动开发(BDD)的目的,框架的名称和徽标是mojitos(一种饮料)的一种玩法。搭建mock测试环境三种方式:(MockitoAnnotations、RunWith、Rule)使用MockitoAnnotationspublic class MockByAnnotation

TensorFlow函数:tf.nn.nce_loss_朱雀至夜的博客-程序员秘密

功能:计算并返回噪声对比估计(NCE, Noise Contrastive Estimation)训练损失。tf.nn.nce_loss( weights, biases, labels, inputs, num_sampled, num_classes, num_true=1, sampled_values=None, r...

数学符号:等号上面加一个点≐_等号上面一个点_ChaoFeiLi的博客-程序员秘密

≐:表示约等于,一般写完等号之后,发现不是等于,而是约等于,所以就懒得涂抹写成≈,所以就添加一个点≈:表示约等于

人脸对齐(二)--ASM算法_asm人脸对齐发展现状_Eason.wxd的博客-程序员秘密

原文:ASM(active shape models)算法介绍http://www.thinkface.cn/thread-2-1-1.htmlASM是基于统计学习模型的特征点提取的一种方法。这个方法是95年就提出来的,不过至今仍是我认为比较好的人脸特征点提取的方案。方法的提出人Tim Cootes后来还提出了aam算法,也很有名,但如果简单是特征点的定位的话,我认为asm的效果可能更好一...

随便推点

【Apollo自动驾驶-从理论到代码】cyber/scheduler模块_cyber scheduler调度_朝花夕拾AutoMan的博客-程序员秘密

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

基于Java实现本地缓存,缓存过期删除和LRU缓存淘汰_static local cache_hongyu.g的博客-程序员秘密

我们结合平常使用的Redis来想下,自己实现本地缓存需要考虑哪些因素呢,我这里总结了三点:数据存储,基于Java实现的话我首先想到的是key-value结构的集合,如HashMap,并发环境下的话使用ConcurrentHashMap、有学习了随着访问顺序元素位置会变化的LinkedHashMap缓存过期删除策略,参考Redis的定期删除和惰性删除缓存淘汰策略,有先进先出、最少使用、最近最少使用(LRU)、随机等策略。由以上可知,要实现缓存过期删除的话,需要记录元素的生效时间,可以实现一个监

1003密码破译(java实现)——————用Java打ACM、蓝桥杯_JLU18YF的博客-程序员秘密

题目要将"China"译成密码,译码规律是:用原来字母后面的第4个字母代替原来的字母.例如,字母"A"后面第4个字母是"E".“E"代替"A”。因此,“China"应译为"Glmre”。请编一程序,用赋初值的方法使cl、c2、c3、c4、c5五个变量的值分别为,’C’、’h’、’i’、’n’、’a’,经过运算,使c1、c2、c3、c4、c5分别变为’G’、’l’、’m’、’r’、’e’,并输...

Nginx优化服务 ---- 进程管理、日志分割、压缩_Sunny~~~的博客-程序员秘密

Nginx优化服务 ---- 进程管理、日志分割、压缩一:日志分割​ 随着 Nginx运行时间的增加,产生的日志也会增加,需要定期地进行日志文件的切割。Nginx自身不具备日志分割处理的功能,但可以通过Nginx信号控制功能的脚本实现日志的自动切割,并通过Linux的计划任务周期性地进行日志切割 。1、编写脚本实现分割[[email protected] opt]# vim feng...

SpringMVC整合FastJson实现RestFul风格API_经年JN的博客-程序员秘密

首先,直接来web.xml文件&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt;&amp;lt;web-app version=&quot;2.4&quot; xmlns=&quot;http://java.sun.com/xml/ns/j2ee&quot; xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLo

推荐文章

热门文章

相关标签