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') + " />"
    });
}