FancyBox 2背景问题 [英] FancyBox 2 Background Issue

问题描述

我正在尝试使用fancybox( http://fancyapps.com/fancybox/)显示图片自动显示在我的页面上，但是背景(灰色)部分无法正常工作.有什么想法吗?

I'm trying to use fancybox (http://fancyapps.com/fancybox/) to show an image automatically on my page, but the background (greyed-out) portion is not working. Any ideas?

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

推荐答案

问题是，如果在DOM准备就绪之前以编程方式打开fancybox，则某种程度上叠加层不会附加到body元素上.

The issue is that if you open fancybox programmatically BEFORE the DOM is ready, somehow the overlay is not appended to the body element.

此:

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

...将在页面加载时触发fancybox，而不会显示叠加(此链接的手册click之后将不会重现该问题)

... will trigger fancybox on page load WITHOUT an overlay (a manual click to the link thereafter won't reproduce the issue though)

您应该至少将.trigger()方法包装在.ready()方法内，例如:

You should wrap at least the .trigger() method inside the .ready() method like :

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

您可以将fancybox初始化保留在.ready()方法 IF 之外，您将在页面底部对其进行初始化，否则也应将其移动.

You can leave the fancybox init outside the .ready() method IF you are initializing it at the bottom of the page otherwise you should also move it.

这篇关于FancyBox 2背景问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！