在layui弹出层遍历展示图片和文章详情里面点击放大图片

xingxingwuxin

已于 2023-07-05 11:33:16 修改

阅读量1.4k

点赞数

文章标签： layui 前端 javascript

于 2023-07-04 18:16:10 首次发布

本文链接：https://blog.csdn.net/fzxyxf1314/article/details/131540488

版权

            <script type="text/html" id="img">
                @{{#  if(d.img){ }}
                <div lay-event="tupian">
                    <img src="@{{d.img}}" alt="" width="50" height="50">
                </div>
                @{{#  } }}
            </script>

        else if (layEvent === 'tupian') {
                        var imgs = data.img;
                        var tupian = '<div><img src="'+imgs+'" alt="" width="350" height="300"></div>';
                        layer.open({
                            type:0,
                            title:"大图",
                            area:['450px','450px'],
                            content:tupian
                        })
                    }

借鉴：在layui弹出层遍历展示图片_layui弹出图片_其实不会敲代码的博客-CSDN博客

二、文章详情

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui图片弹窗示例（文章详情里面的图片，点击放大）</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css">
</head>
<body>

<div class="layui-row">
    <div class="layui-col-md6">
        <img src="small_image.jpg" alt="小图" class="layui-img-click">
    </div>
    <div class="layui-col-md6">
        <img src="small_image.jpg" alt="小图" class="layui-img-click">
    </div>
</div>

<!-- 弹窗模板 -->
<script type="text/html" id="imgTpl">
    <div>
        <img src="{{d.src}}" alt="大图" style="max-width: 100%; max-height: 100%;">
    </div>
</script>

<script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js"></script>
<script>
    layui.use(['layer', 'jquery'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;

        // 点击图片弹出大图
        $('.layui-img-click').click(function () {
            var src = $(this).attr('src');
            var imgHtml = $('#imgTpl').html();

            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                area: ['auto', 'auto'],
                skin: 'layui-layer-nobg', // 没有背景色
                shadeClose: true,
                content: imgHtml.replace('{{d.src}}', src)
            });
        });
    });
</script>
</body>
</html>