layUI 图片预览

一、

html 代码

 <td> <img class="layui-upload-img" onclick="previewImg(this)" src="{$familyDoctor.logo}"  /></td>

js 代码 图片原始大小

<script>

    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        var height = img.height + 50; //获取图片高度
        var width = img.width; //获取图片宽度
        var imgHtml = "<img src='" + obj.src + "' />";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width + 'px',height+'px'],
            shadeClose:true,//点击外围关闭弹窗
            scrollbar: false,//不现实滚动条
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }

</script>

js 代码 图片固定大小

    function previewImg(obj) {
        var img = new Image();  
        img.src = obj.src;
        var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";  
        //弹出层
        layer.open({  
            type: 1,  
            shade: 0.8,
            offset: 'auto',
            area: [500 + 'px',550+'px'],
            shadeClose:true,
            scrollbar: false,
            title: "图片预览", //不显示标题  
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
            cancel: function () {  
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
            }  
        }); 
    }

二、

html代码

  <td  id="x-img"> <img class="layui-upload-img" src="/uploads/{$familyDoctor.logo}"  style="width: 40px; height: 40px; border-radius: 4px;" /></td>

js代码

   layui.use(['laydate','element','laypage','layer'], function() {
            $ = layui.jquery;//jquery
            laydate = layui.laydate;//日期插件
            lement = layui.element();//面包导航
            laypage = layui.laypage;//分页
            layer = layui.layer;//弹出层

            layer.ready(function(){ //为了layer.ext.js加载完毕再执行
                layer.photos({
                    photos: '#x-img'
                    ,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                });
            });


        });