FancyBox 2 Background Issue

Question

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?

See example at http://www.southshoreopera.org

Answer 1

Have you downloaded and correctly placed the fancybox_overlay.png?

The background is created through the use of an image, so if the .png file is not at the correct path being called, it will not appear. I believe it needs to be in the same folder as the .css file.

EDIT:

Looking closer at the CSS file you find this:

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

You can either place the overlay.png file in the CSS folder, or change the path of the url such that it finds the image. Hope this helps.

Answer 2

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

This :

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

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

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>

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.