代码之家 › 专栏 › 技术社区 › AJB

FancyBox包装无法根据图像尺寸自动调整大小

autosize fancybox jquery-plugins

AJB · 技术社区 · 15 年前

我对FancyBox有意见。它应该根据图像的尺寸自动调整包装器的大小。不是这样的。特别是它太小了。

以下是我使用的FancyBox jQuery代码:

$("a[rel=photo_gallery]").fancybox({
    'type'              : 'image',
    'padding'           : 10,
    'autoScale'         : true,
    'cyclic'            : true,
    'overlayOpacity'    : 0.7,
    'overlayColor'      : '#000000',
    'transitionIn'      : 'fade',
    'transitionOut'     : 'fade',
    'titlePosition'     : 'over',
    'titleShow'         : false,
    'resize'            : 'Auto'
});

其他人有没有遇到过这个问题?

事先谢谢你的帮助。

4 回复 | 直到 11 年前

basZero A_M 11 年前

以上内容对我来说不起作用(FB3beta)。

这是我的解决方案:

.fancybox-wrap, .fancybox-wrap *{
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    -safari-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

AJB 15 年前

明白了…

是我的CSS重置被FancyBox CSS触发。我将DIV的框大小调整样式重置为“边框框”。

修复方法是进入FancyBox CSS并声明Wrap、Outer和Inner Div的Box大小为“Content Box”。

像这样:

#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 20px;
z-index: 1101;
display: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-inner {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
outline: none;
overflow: hidden;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

希望这能帮助其他遇到这种情况的人。

Simon_Weaver 13 年前

我对弹出窗口中显示的任意HTML也有同样的问题。我发现这是修复它所必需的全部(使用eric meyer的reset.css时)是:

.fancybox-overlay
{
    line-height: normal;    
}

reset.css文件中有问题的代码是

body 
{
    line-height: 1;
}

免责声明:仅在IE9和Chrome中测试-但似乎有效。这是为任何最新版本的FancyBox在写作时。

David Steenkamp 11 年前

我还发现,消除盒子尺寸的全局重置有助于:

/*
*,
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing:    border-box;
box-sizing:         border-box;
*/

烦人的部分是找到所有依赖于边界框的项目,然后仅对这些项目启用边界框。幸运的是我只有3个…到目前为止我发现的。不过,Firebug/Developer工具有很大帮助。