jquery - 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

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.