layui在table中点击图片可弹出预览图

layui前段框架，如何做到点击图片时弹出大的预览图？

方法很简单，举个例子我现在是要table中点击图片弹出预览图，意思一样

首先

在table中加入formatter用来展示小图片，代码和效果图如下

{ label: '证书文件', name: 'zhengShuFile', index: 'zheng_shu_file', width: 80 ,
             formatter :function (cellvalue, options, rowObject) {
                 return '<div onclick="showImg(this)" ><img src="'+cellvalue+'" alt="" width="25px" height="25px"></a></div>'
             }
          },

然后再showImg方法中传入图片访问路径，方法中调用layer.open方法在content中写上img标签并控制他的宽高，代码和效果如下

//显示大图片
function showImg(t) {
    var t = $(t).find("img");
    //页面层
    layer.open({
        type: 1,
        closeBtn: 1,
        shade: false,
        title: false, //不显示标题
        //skin: 'layui-layer-nobg', //没有背景色
        shadeClose: false,
        area:['50%','90%'],
        content: '<div style="text-align:center"><img style="height: 90%;width:60%"  src="' + $(t).attr('src') + '" /></div>'
    });
}

标签： layui