【layui】图片查看器

简介: 【layui】图片查看器

先看一下文档



image.png



2


修改html


这里用箭头指向了三个地方


第一个是id:这个值是需要跟随id的变化而变化,否则就只有第一个列表可以点击,其他的就不可以


第二个就是onclick:这个事件需要把对象本身当做参数传递过去


image.png




3


js代码


js这里就是获取一个父级的属性id值,然后传递给photos即可


image.png




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参数)
        });
    })
相关文章
|
JSON 数据格式 容器
Layui 内置方法 - layer.photos(相册层)
Layui 内置方法 - layer.photos(相册层)
1960 0
VUE3(三十九)自定义loading组件~
VUE3(三十九)自定义loading组件~
550 0
移动端click事件、touch事件、tap事件的区别
移动端click事件、touch事件、tap事件的区别
396 0
|
9月前
|
API
鸿蒙开发学习:动画
鸿蒙原生动画API使用
127 4
鸿蒙开发学习:动画
|
11月前
|
安全 大数据 数据挖掘
大数据时代,数据安全管理的问题与对策
无论是从企业还是个人的需求出发,考取一个大数据管理相关的证书都是最好的选择,不仅能提升大数据管理能力、意识和素质,还能获得更高的市场信誉与认可。
|
开发框架 监控 前端开发
自定义Vue&Element组件,实现用户选择和显示
自定义Vue&Element组件,实现用户选择和显示
|
消息中间件 网络协议 JavaScript
消息队列 MQ产品使用合集之报错提示是"the internal error!",是什么原因导致的”
消息队列(MQ)是一种用于异步通信和解耦的应用程序间消息传递的服务,广泛应用于分布式系统中。针对不同的MQ产品,如阿里云的RocketMQ、RabbitMQ等,它们在实现上述场景时可能会有不同的特性和优势,比如RocketMQ强调高吞吐量、低延迟和高可用性,适合大规模分布式系统;而RabbitMQ则以其灵活的路由规则和丰富的协议支持受到青睐。下面是一些常见的消息队列MQ产品的使用场景合集,这些场景涵盖了多种行业和业务需求。
|
NoSQL 算法 容灾
『MongoDB』MongoDB高可用部署架构——复制集篇(Replica Set)
读完这篇文章里你能收获到 1. MongoDB是如何通过复制集实现高可用的 2. 主节点宕机后如何通过选举做到故障恢复 3. 在复制集中常见的可调整参数有哪些 4. 在Linux原生环境搭建MongoDB复制集 5. 在Winodws环境搭建MongoDB复制集
1198 1
『MongoDB』MongoDB高可用部署架构——复制集篇(Replica Set)