8

我在使用 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

4 回答 4

17

弄清楚了 ...

是我的 CSS 重置被 FancyBox CSS 绊倒了。我将 DIV 的框大小样式重置为“边框框”。

修复方法是进入 FancyBox CSS 并将 wrap、outer 和 inner DIV 的 box-sizing 声明为“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;
}

希望这会帮助遇到此问题的其他人。

于 2010-10-18T22:38:02.157 回答
4

以上对我不起作用（FB 3beta）。

这是我的解决方案：

.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;
}
于 2013-11-09T10:48:33.960 回答
1

I had the same problem with arbitrary HTML showing in the popup. I found this was all that was necessary to fix it (when using Eric Meyer's reset.css) is this:

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

The offending code in the reset.css file was this

body 
{
    line-height: 1;
}

Disclaimer: Tested only in IE9 and Chrome - but it appears to work. This is for whatever the latest version of fancybox is at time of writing.

于 2013-02-03T01:43:12.090 回答
1

我还发现摆脱 box-sizing 的全局重置有助于：

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

烦人的部分是找到所有依赖边界框的项目，然后为这些项目启用它。对我来说幸运的是，到目前为止我只找到了 3 个。Firebug / Developer Tools 帮助解决了这个问题。

于 2014-09-03T04:07:27.403 回答