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

这篇具有很好参考价值的文章主要介绍了在layui弹出层遍历展示图片和文章详情里面点击放大图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

            <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博客

二、文章详情文章来源地址https://www.toymoban.com/news/detail-524868.html

<!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>

到了这里，关于在layui弹出层遍历展示图片和文章详情里面点击放大图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！