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> 

... 당신은 적어도 포장한다

오버레이 (이후 비록 문제를 재현하지 않습니다 링크에 수동 click)없이 페이지로드에 fancybox를 트리거 내부 .trigger() 방법 .ready() 방법처럼 : 당신은 외부 fancybox 초기화를 남길 수 있습니다

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

.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의 경로를 변경할 수 있습니다 이미지를 찾는다. 희망이 도움이됩니다.