3

大家好，

任何人都知道如何将 slimbox 的覆盖窗口大小限制为用户窗口大小的百分比（就像 prettyphoto 一样）

谢谢

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

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

4

5 回答 5

6

实际上，您的解决方案都没有为我做到这一点，所以我不得不将它们放入搅拌机并通过这样做来混合结果：

正如他所说，在 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);            
        }

*请客气，我是早期的业余开发者；）

于 2013-03-06T22:49:52.870 回答
5

我试图使用 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 在图像周围使用的额外空间。随意根据需要调整这些。

于 2013-03-04T16:19:26.573 回答
1

我有一个类似的问题，图像超出了窗口的大小。我知道我可以通过限制上传时图像的大小来解决这个问题，但我不想这样做，我宁愿能够设置 slimbox 窗口的大小，所以我开始了任务，这就是我来起来，它完美地工作！:)

为了使将来更容易调整，您希望在选项中将 userDefinedWidth 和 userDefinedHeight 添加到您对 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);

完成此操作后，您就可以开始了，并且应该能够将 slimbox 调整为您选择的设置。

皮特。

PS：我是一个 php 人，正在掌握 jquery/javascript，所以如果有人可以让这更好/更快/更容易，请随意。哦，请随时在您喜欢的任何地方使用此代码。;)

于 2013-02-28T15:58:44.077 回答
0

虽然 Avinash 的响应有效，但这要简单得多：

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

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

.pp_overlay 类就是它在 PrettyPhoto 中的名称。您将需要找到 slimbox 的等价物。

于 2011-06-24T20:04:28.973 回答
-2

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

$('#overlay').width($(window).width()).height($(window).height());
于 2010-07-15T15:29:21.443 回答