Slimbox2適合窗口-CSS，jQuery

Question

我正在為畫廊使用Slimbox2，但缺少一項重要功能-調整框架大小以適合屏幕。 當圖像太大時，它將超出屏幕范圍。 是否有人找到解決方案？

插件官方網站

api文檔

解決這個問題對我來說真的很重要，在此先感謝您！

Answer 1

我有同樣的問題，我做到了：

我打開了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); 

    }

我是一個業余愛好者，所以請客氣:)如果您有關於修復它的問題，請問我:)