layui图片显示

最新推荐文章于 2024-08-15 11:02:18 发布

weixin_30660027

最新推荐文章于 2024-08-15 11:02:18 发布

阅读量867

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cjjjj/p/10063310.html

本文介绍如何使用Layui框架实现图片赋值与弹窗展示效果，包括图片预览、动画类型设置等关键步骤。通过具体代码示例，展示了在不同条件下图片的加载与显示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些东西看文档可以实现，但当真不如自己写的实在。所以还是记录下来吧。

1. 图片赋值

    <div id="layer-photos-demo" class="layer-photos-demo" style="padding: 10px;">
        @if(empty($classroomSnapShots))
            无数据
        @else
            @foreach($classroomSnapShots as $pictureUrl)
                <img layer-src={{$pictureUrl}} src={{$pictureUrl}}
                     width="400px" height="224px" style="margin: 3px; border: black 2px"  ;/>

            @endforeach
        @endif

    </div>

2. 调用layui.photos

    <script>
        var $;
        var layer;
        layui.use(['element', 'jquery', 'form', 'layer'], function() {
            $ = layui.jquery;
            layer = layui.layer;

            layer.photos({
                photos: '#layer-photos-demo'
                , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        });
    </script>