jquery - FancyBox 2 背景问题

Question

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

请参阅http://www.southshoreopera.org上的示例

Answer 1

问题是，如果您在 DOM 准备好之前以编程方式打开 fancybox，则覆盖不会以某种方式附加到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()方法之外，否则您也应该移动它。

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 文件夹中，也可以更改 url 的路径以便它找到图像。希望这可以帮助。