FancyBox 2背景问题

Question

我正在尝试使用fancybox（http://fancyapps.com/fancybox/）在我的页面上自动显示图像，但背景（灰色）部分无效。有什么想法吗？

请参阅http://www.southshoreopera.org

上的示例

Answer 1

问题在于，如果以编程方式打开fancybox，则在DOM准备就绪之前，覆盖层不会附加到body元素。

这：

<script type="text/javascript">
$(".fancybox").fancybox({
  // API options
});
$(".fancybox").eq(0).trigger('click');
</script>

...将在页面加载时触发fancybox没有叠加（此后链接的手册click将无法重现该问题）

您应该至少在.trigger()方法中包含.ready()方法，如：

<script type="text/javascript">
$(".fancybox").fancybox({
  // API options
});
$(document).ready(function(){
  $(".fancybox").eq(0).trigger('click');
});
</script>

您可以将fancybox init置于.ready()方法 IF 之外，您正在页面底部初始化它，否则您也应该移动它。

Answer 2

您下载并正确放置了fancybox_overlay.png吗？

通过使用图像创建背景，因此如果.png文件没有被调用的正确路径，则不会显示。我认为它需要与.css文件位于同一文件夹中。

修改

仔细观察CSS文件，你会发现：

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('fancybox_overlay.png');
}

您可以将overlay.png文件放在CSS文件夹中，也可以更改网址的路径以便找到图像。希望这会有所帮助。