【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(相册层)
2535 0
|
前端开发 JavaScript
通用的layui框架系统管理后台模板
通用的layui框架系统管理后台模板
744 0
C#学习相关系列之多线程---TaskCompletionSource用法(八)
C#学习相关系列之多线程---TaskCompletionSource用法(八)
1074 0
|
8月前
|
JSON 缓存 API
美客多平台关键词商品搜索API接口实践指南
本文详解美客多(Mercado Libre)关键词商品搜索API的调用方法,涵盖OAuth 2.0认证、请求构建(含分页/排序/过滤)、JSON响应解析、错误处理及最佳实践,助力开发者高效接入拉美最大电商平台的商品数据。(239字)
1355 2
|
搜索推荐 应用服务中间件 Apache
301重定向全面指南:从技术原理到实战应用
301重定向是HTTP协议中的永久跳转机制,适用于网站域名更换、结构调整等场景。它能有效传递SEO权重,提升用户体验,并可通过Apache、Nginx、IIS等服务器配置实现。本文详解其原理、配置方法及最佳实践。
1750 14
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
2385 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
Java Linux
POI 生成word 转 pdf
根据业务需要 需要出一份 PDF 文件 作为 公告的附件使用 PDF文件中 需要有 各种数据作为展示 是动态生成的
3386 0
POI  生成word 转 pdf
|
SQL 安全 数据库
win10 安装 sql server2012
安装 SQL Server 2012 是许多开发者使用数据库的第一步。主要步骤包括:下载并运行安装程序,接受许可条款,选择功能(如数据库引擎服务),配置实例和服务器设置,设置身份验证模式,完成安装并进行测试。建议安装 SQL Server Management Studio (SSMS) 进行管理和维护,确保数据安全。
1131 3
|
前端开发 JavaScript 数据库
layui框架实战案例(20):常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)
layui框架实战案例(20):常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)
1292 0
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
1365 29