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

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

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

事实上,你的解决方案都不适合我,所以我不得不把它们放在搅拌机里,通过这样做来对结果进行分类:

正如他所说,注意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);            
        }       

*客气点,我是早期的业余开发者;)

我试图使用红粉军的解决方案,但我认为他使用的是旧版本的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在图像周围使用的额外空间。可以根据需要随意调整。

我有一个类似的问题,那就是图像超出了窗口的大小。我知道我可以通过限制上传图像的大小来解决这个问题,但我不想这样做,我宁愿能够设置“减肥窗口”的大小,所以我就开始着手这个任务,这是我想到的,它工作得很好!:)

为了便于将来调整,您希望在“选项”中的“调用精简框”中添加“用户定义宽度”和“用户定义高度”行:

例子:

$(function($) {
    $("a[rel^='lightbox']").slimbox({
    /* Put custom options here */
    userDefinedWidth:640, /* set max width here */
    userDefinedHeight:480, /* set max height here */
    initialWidth: 250,
    initialHeight: 250,
    imageFadeDuration: 400
});

接下来,打开slimbox.js(或slimbox2.js)并再次查找选项,这次添加的是userDefinedWidth和userDefinedHeight,没有类似的值:

w.slimbox=function(O,N,M){
    u=w.extend({
    userDefinedWidth:'',
    userDefinedHeight:'',
    loop:false,
    ...etc.
    ...etc.

接下来查找名为i的函数。 在i函数中,替换以下行:

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

使用这些线条:

var my_w = u.userDefinedWidth; 
var my_h = u.userDefinedHeight;
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);

一旦你做到了这一点,你就可以很好地去,应该能够调整减肥箱的大小,以适应你的选择。

Pete。

PS:我是一个熟悉jquery/javascript的php人,所以如果有人能让它变得更好、更快、更容易,请放心。哦,请随意在任何你喜欢的地方使用这个代码。;)

虽然阿维纳什的反应有效,但这要简单得多:

.pp_overlay {max-width:100%; max-height:100%;}

以上字段中的百分比将其作为用户浏览器大小的百分比。

类。pp_覆盖是它在prettypoto被称为。您需要找到与Slimbox相当的产品。