layui 表格点击图片放大

表格

,cols: [[ //表头
    {checkbox: true,fixed: true}
    ,{type: 'numbers', title: 'ID', sort: true,width:80}
    ,{field: 'product_name', title: '名称'}
    ,{field: 'product_description', title: '描述'}
    ,{
        title: '图片'
        ,align: "center"
        ,width:100
        ,templet: function (d) {
            return '<div ><img src="'+d.path+'" alt="" width="50px" height="50px" onclick="showBigImage(this)"></a></div>';
        }
    }
    ,{field: 'product_url', title: '链接'}
    ,{field: 'remark', title: '备注'}
    ,{field: 'created_at', title: '添加时间'}
    ,{fixed: 'right', width: 220, align:'center', toolbar: '#options'}
]]

 

 

JS

/**
 * @param e 图片对象
 */
function showBigImage(e) {
    layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        shadeClose: true, //点击阴影关闭
        area: [$(e).width + 'px', $(e).height + 'px'], //宽高
        content: "<img src=" + $(e).attr('src') + " />"
    });
}