layer picture preview adaptive window

Recently, when using layer to preview pictures, we encountered a problem. If the size of the picture is larger than the size of the browser, the picture cannot adapt to the screen. Later I saw a blog post: layer picture adaptive window

Original link: https://blog.csdn.net/qazx123q/article/details/82256930
//html structure

<a href="javascript:;" onClick="showImg(this)" data-href="{$vo.src}" ><img src="{$vo.src}" class="img-responsive" ></a>
function showImg(obj){
    var url = $(obj).data('href');
    var thisimg = $(obj).siblings().find('img')
    var img = "<img src='" + url + "'  />";
    var setting = {
        type: 1,
        title: false,
        closeBtn: 0,
        skin: 'layui-layer-nobg', //No background color
        shadeClose: true,
        shade: 0.6, //mask opacity 
        content: img
    }
 
    var windowH = $(window).height();
    var windowW = $(window).width();
 
    getImageWidth(url,function(w,h){
        //console.log("win:"+windowH+","+windowW);
        //console.log("img:"+h+","+w);
        // size pictures
        if(w>windowW || h>windowH){
            if(w>windowW && h>windowH){
                w = thisimg .width()*3;
                h = thisimg .height()*3;
                setting.area = [w+"px",h+"px"];
            }else if(w>windowW){
                setting.area = [windowW+"px",windowW*0.5/w*h+"px"];
            }else{
                setting.area = [w+"px",windowH+"px"];
            }
        }else{
            setting.area = [w+"px",h+"px"];
        }
        // Set layer
        layer.open(setting);
    });
}
 
function getImageWidth(url,callback){
    var img = new Image();
    img.src = url;
 
    // If the picture is cached, the cached data will be returned directly
    if(img.complete){
        callback(img.width, img.height);
    }else{
        // Fully loaded events
        img.onload = function(){
            callback(img.width, img.height);
        }
    }
 

But it did not completely solve the problem. The original renderings are

If the picture is too large, the following conditions will occur: scroll wheel

So slightly modify the above code

function showImg(obj){
    var url = $(obj).data('href');
    var thisimg = $("#img");
    var setting = {
        type: 1,
        title: false,
        closeBtn: 0,
        skin: 'layui-layer-nobg', //No background color
        shadeClose: true,
        shade: 0.6, //mask opacity 
    }
    var windowH = $(window).height();
    var windowW = $(window).width();
    getImageWidth(url,function(w,h ){
        console.log("win:"+windowH+","+windowW);
        console.log("img:"+h+","+w);
        // size pictures
        if(w>windowW || h>windowH){
            if(w>windowW && h>windowH){
                w = thisimg .width()*3;
                h = thisimg .height()*3;
                setting.area = [w+"px",h+"px"];
				**setting.content = "<img src='" + url + "'   width='" + w + "px' height='" + h + "px' />";**
            }else if(w>windowW){
                setting.area = [windowW+"px",windowW*0.5/w*h+"px"];
				**setting.content = "<img src='" + url + "'   width='" + windowW + "px' height='" + windowW*0.5/w*h + "px'/>";**
            }else{
                setting.area = [w+"px",windowH+"px"];
				**setting.content = "<img src='" + url + "'   width='" + w + "px' height='" + windowH + "px'/>";**
            }
        }else{
            setting.area = [w+"px",h+"px"];
			**setting.content = "<img src='" + url + "'   width='" + w + "px' height='" + h + "px'/>";**
        }
        // Set layer
        layer.open(setting);
    });
}
 
function getImageWidth(url,callback){
    var img = new Image();
    img.src = url;
 
    // If the picture is cached, the cached data will be returned directly
    if(img.complete){
        callback(img.width, img.height);
    }else{
        // Fully loaded events
        img.onload = function(){
            callback(img.width, img.height);
        }
    }

}

Limit the size of img by judging the content variable of setting in layer. The size is the size of the picture pop-up box. This problem has been solved, as shown in the following figure.

Published 2 original articles, praised 0 and visited 14
Private letter follow

Tags: Javascript

Posted on Tue, 04 Feb 2020 13:49:16 -0500 by eheia