首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >适合窗口的Slimbox2 - CSS、jQuery

适合窗口的Slimbox2 - CSS、jQuery
EN

Stack Overflow用户
提问于 2013-09-18 09:37:32
回答 1查看 253关注 0票数 1

我在我的图库中使用Slimbox2,但是缺少一个重要的特性--调整边框大小以适应屏幕。当图像太大时,它会超出屏幕。有没有人找到了解决方案?

Plugin official site

Api documentation

修复这个对我来说真的很重要,提前谢谢!

EN

回答 1

Stack Overflow用户

发布于 2013-09-30 17:56:21

我也遇到了同样的问题,我就这么做了:

我打开slimbox2.js文件并替换为:

代码语言:javascript
复制
$(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
$(sizer).width(preload.width);
$([sizer, prevLink, nextLink]).height(preload.height);

通过以下方式:

代码语言:javascript
复制
     /* 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); 

    }

我是一个业余爱好者,所以请友好:)如果你有关于修复它的问题(问我:)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18862545

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档