【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参数)
        });
    })
相关文章
|
前端开发
CSS div隐藏滚动条
CSS div隐藏滚动条
86 0
|
5月前
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
|
6月前
|
前端开发
css仿el-tabs标签页效果
【8月更文挑战第9天】
48 2
|
前端开发 程序员
css制作的tip提示框
css制作的tip提示框
316 0
css-遮罩层
遮罩层原理 利用一个全屏、半透明的div遮住页面上其它元素
|
前端开发 JavaScript Java
|
前端开发
纯CSS实现跑马灯效果
又是一个安静的晚上,又是没有灵感的一天,又只能去逛逛codepen。看到一个流光的边框效果,我就想如何通过自己的方式来现这样一个效果。 突然又想起路边夜市的招牌,不就是一个流光效果加一个广告词吗。这下我的兴趣一下就激发起来了。
|
前端开发
1、CSS中iconfont 彩色图标使用详解
1、CSS中iconfont 彩色图标使用详解
448 0
1、CSS中iconfont 彩色图标使用详解
|
前端开发 流计算
3D 穿梭效果?使用 CSS 轻松搞定
3D 穿梭效果?使用 CSS 轻松搞定
220 0
3D 穿梭效果?使用 CSS 轻松搞定

相关课程

更多