【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参数)
        });
    })
相关文章
|
数据库 数据安全/隐私保护
LayUI之树形菜单的实现
LayUI之树形菜单的实现
113 0
|
前端开发 Java 开发者
LayUI系列(二)之树形菜单的实现
LayUI系列(二)之树形菜单的实现
|
前端开发
CSS div隐藏滚动条
CSS div隐藏滚动条
90 0
|
6月前
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
|
7月前
|
前端开发
css仿el-tabs标签页效果
【8月更文挑战第9天】
49 2
|
8月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
322 3
|
10月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
137 0
|
前端开发 数据可视化 JavaScript
Layui实现树形菜单(超详细)
Layui实现树形菜单(超详细)
244 0
|
前端开发 Java 开发者
LayUI之树形菜单
LayUI之树形菜单
110 0
|
前端开发 JavaScript Java

相关课程

更多