如何让 slimbox 2 自动调整大小以适合屏幕？

Question

根据 Slimbox2 文档，不支持此功能。但我想知道是否有人遇到过使这项工作有效的技巧。

我主要担心的是我的一些图像相当长，并且在低分辨率下 LightBox2 会给用户带来恼人的体验。

Answer 1

我最近开始在我的网站 (http://www.trips.elusien.co.uk) 上使用 slimbox2，发现它可以从一些修改中受益：

• “幻灯片大小调整”：这使得幻灯片的大小常数，而不是取决于图像的大小（通过指定像素大小），或者您可以使用百分比来使幻灯片在幻灯片中变大或变小。您可以使用 2 个新选项来指定：

  slideWidth: 0, // 幻灯片的初始宽度（以像素为单位或字符串形式的百分比，例如“50%”）
  SlideHeight: 0, // 幻灯片的初始高度（以像素为单位或以字符串形式的百分比，例如“50%”）
  

• 使幻灯片能够自动翻转，而不是手动翻转。您可以使用新选项来指定它：

  slideInterval: 0, // 翻转幻灯片的时间间隔（以秒为单位），0 表示不自动化。
  

• 从幻灯片中下载幻灯片。

第一个和最后一个功能无法使用 slimbox2 的原始版本来完成，因为在该版本中图像显示为背景图像，而不是使用“IMG”标签。

我已将 Javascript 和 CSS 文件放在我的网站上。如果您想尝试它们，请访问我的网站并单击“slimbox 示例”链接，您可以从此处下载它们。要查看使用 slimbox2 的简洁方法，请单击主页上的“photoSLide Show”链接。

问候尼尔

Answer 2

检查我的代码很容易修复。

找到并替换 slimbox2.js 文件中的三行：

$(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 */
    window.innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //ie fix
    window.innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //ie fix        
    var winWidth =  window.innerWidth-200; //browser width
    var winHeight = window.innerHeight-100; //browser height
    var my_w = preload.width; //original width
    var my_h = preload.height; //original height

        // scale  width
        var scaleW1 = winWidth;
        var scaleH1 = (my_h * winWidth) / my_w;

        // scale  height
        var scaleW2 = (my_w * winHeight) / my_h;
        var scaleH2 = winHeight;
        var scale = (scaleW2 > winWidth);

        if (scale) {
            reswidth = Math.floor(scaleW1);
            resheight = Math.floor(scaleH1);

        }
        else {
            reswidth = Math.floor(scaleW2);
            resheight = Math.floor(scaleH2);

        }
        if ($("p").hasClass("slimboxie")){ 
        $(image).css({filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='"+ activeURL + "', sizingMethod='scale')", visibility: "hidden", display: ""});

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

im 业余的 javascript 但我认为它工作得很好。我也让它在 IE8 上工作。您只需要插入：

<!--[if IE 8]>
<p class="slimboxie"></p>
<![endif]-->

Answer 3

加载图像后，执行以下操作：

$('#lbImage').css('background-size', 'contain');