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