列表图片弹出预览自适应

ngu98 26天前 190

使用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);
            }
        }

    }

此代码借鉴于blog.csdn.net/qazx123q/article/details/82256930 修改


使用
{
field: 'cover',
title: __('封面'),
formatter: Table.api.formatter.image,
open:true, //是否弹出图片预览
classname:'img-cover'
},

最后于 26天前 被ngu98编辑
最新回复 (3)
  • web0376 13天前
    感谢TA
    0 引用 2

    好东西收藏一下

  • aldy7913 12天前
    感谢TA
    1 引用 3

    收藏了。如果自适应成功我就想再加上

      $('.table img').zoomify();

    的插件了。最好能有滚动鼠标放大效果。
    插件描述:jQuery点击图片弹出放大预览 Lightbox插件
    http://www.jq22.com/jquery-info9102

  • ngu98 楼主 12天前
    感谢TA
    0 引用 4

    @aldy7913 鼠标方法这个功能就希望各位大佬能加上了

  • 未登录
    5
返回