使用layer 弹出图片预览 自适应

修改require-table.js 单图image: function (value, row, index) {    value = value ? value : '/assets/img/blank.gif';    var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';    var open = typeof this.open!== 'undefined'?this.open:false;    if (open===true){        return '<a href="JavaScript:;"><img class="' + classname + ' openImg" src="' + Fast.api.cdnurl(value) + '"  /></a>'    }    return '<a href="' + Fast.api.cdnurl(value) + '" target="_blank"><img class="' + classname + '" src="' + Fast.api.cdnurl(value) + '" /></a>';},多图images: function (value, row, index) {    value = value === null ? '' : value.toString();    var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';    var open = typeof this.open!== 'undefined'?this.open:false;    var arr = value.split(',');    var html = [];    $.each(arr, function (i, value) {        value = value ? value : '/assets/img/blank.gif';        if (open===true){            html.push('<a href="JavaScript:;"><img class="' + classname + ' openImg" src="' + Fast.api.cdnurl(value) + '"  /></a>')        }else{            html.push('<a href="' + Fast.api.cdnurl(value) + '" target="_blank"><img class="' + classname + '" src="' + Fast.api.cdnurl(value) + '" /></a>');        }    });    return html.join(' ');},

在backend-init.js加入 $(document).on('click','.openImg',function () {        Utils.showImg(this)    })

自己写一个工具js

Utils.showImg = function showImg(obj){        var url = $(obj).attr('src');        if (url==undefined){            return false;        }        var $imgObj = $(obj);        var img = "<img src='" + url + "'  />";        var options = {            type: 1,            title: false,            closeBtn: 0,            skin: 'layui-layer-nobg', //没有背景色            shadeClose: true,            shade: 0.6, //遮罩透明度            content: img        }        var windowH = $(window).height();        var windowW = $(window).width();        Utils.getImageWidth(url,function(w,h){            // 调整图片大小            if(w>windowW || h>windowH){                if(w>windowW && h>windowH){                    w = $imgObj .width()*3;                    h = $imgObj .height()*3;                    options.area = [w+"px",h+"px"];                }else if(w>windowW){                    options.area = [windowW+"px",windowW*0.5/w*h+"px"];                }else{                    options.area = [w+"px",windowH+"px"];                }            }else{                options.area = [w+"px",h+"px"];            }            // 设置layer            layer.open(options);        });    }    Utils.getImageWidth =function(url,callback){        var img = new Image();        img.src = url;        // 如果图片被缓存，则直接返回缓存数据        if(img.complete){            callback(img.width, img.height);        }else{            // 完全加载完毕的事件            img.onload = function(){                callback(img.width, img.height);            }        }    }此代码借鉴于https://blog.csdn.net/qazx123q/article/details/82256930 修改使用{field: 'cover',title: __('封面'),formatter: Table.api.formatter.image,open:true, //是否弹出图片预览classname:'img-cover'},

希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， Fastadmin， ClassCMS， LeCMS， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。