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 .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'); 
} 

您可以放置​​在CSS文件夾中的文件overlay.png或更改URL的路徑使它找到圖像。希望這可以幫助。