将slimbox (lightbox)图像限制为窗口大小

Question

大家好，

任何人都知道如何将slimbox的覆盖窗口大小限制为用户窗口大小的百分比(就像漂亮的照片一样)

谢谢

下面是模块代码：http://paste.ly/3Kz

和slimbox js：http://paste.ly/3L0

Answer 1

捕获用户窗口分辨率，并根据捕获的信息设置覆盖的宽度和高度。

$('#overlay').width($(window).width()).height($(window).height());

Answer 2

实际上，你的两个解决方案都不能很好地解决我的问题，所以我不得不把它们放在搅拌机里，然后通过这样做来混合结果：

正如他所说，请注意slimbox2.js中的以下代码行

w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});
w(p).width(k.width);
w([p,I,d]).height(k.height);

并将它们替换为以下代码块：

        var winWidth  = window.innerWidth  - 20;
        var winHeight = window.innerHeight - 120;
        if (winWidth > winHeight) { 
            var maxSize = winHeight; 
        } else { 
            var maxSize = winWidth;
        }

        /* determine proper w and h for img, based on original image'w dimensions and maxSize */
        var my_w = k.width; 
        var my_h = k.height;            

        if (my_w > my_h) {
            my_h = maxSize * my_h / my_w;
            my_w = maxSize;
        } else {
            my_w = maxSize * my_w / my_h;
            my_h = maxSize;
        }

        if (k.width > my_w || k.height > my_h){ /* constrain it */
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:""+my_w+"px "+my_h+"px",visibility:"hidden",display:""});
            w(p).width(my_w);
            w([p,I,d]).height(my_h);    
        }
        else { /* default behaviour  NORMAL before hackeing*/
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:"",visibility:"hidden",display:""});
            w(p).width(k.width);
            w([p,I,d]).height(k.height);            
        }       

*仁慈一点，我是一个早期的业余开发人员;)

Answer 3

我试图使用Redscouse的解决方案，但我认为他使用的是较旧版本的slimbox。这是一个基于v2.04的解决方案，它将限制图像以适应当前浏览器窗口。

找到animateBox()函数。在顶部附近，您应该可以找到类似以下内容的行：

$(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
$(sizer).width(preload.width);
$([sizer, prevLink, nextLink]).height(preload.height);

将这些行替换为以下内容：

/* make sure the image won't be bigger than the window */
var winWidth = $(window).width() - 20;
var winHeight = $(window).height() - 104;
var maxSize = (winWidth > winHeight) ? winHeight : winWidth; /* the smaller dimension determines max size */

/* determine proper w and h for img, based on original image'w dimensions and maxSize */
var my_w = preload.width; 
var my_h = preload.height;
if (my_w > my_h)
{
    my_h = maxSize * my_h / my_w;
    my_w = maxSize;
}
else
{
    my_w = maxSize * my_w / my_h;
    my_h = maxSize;
}

if (preload.width > my_w || preload.height > my_h){ /* constrain it */
    $(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: my_w + "px " + my_h + "px", visibility: "hidden", display: ""});
    $(sizer).width(my_w);
    $([sizer, prevLink, nextLink]).height(my_h);
}
else { /* default behaviour */
    $(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: "", visibility: "hidden", display: ""});
    $(sizer).width(preload.width);
    $([sizer, prevLink, nextLink]).height(preload.height);
}

-20和-104调整是为了考虑slimbox在图像周围使用的额外空间。您可以根据需要对其进行调整。