jquery - FancyBox 2 Background Issue -

i'm trying use fancybox (http://fancyapps.com/fancybox/) show image automatically on page, background (greyed-out) portion not working. ideas?

see example @ http://www.southshoreopera.org

the issue if open fancybox programmatically before dom ready, somehow overlay not appended body element.

this :

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

... trigger fancybox on page load without overlay (a manual click link thereafter won't reproduce issue though)

you should wrap @ least .trigger() method inside .ready() method :

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

you can leave fancybox init outside .ready() method if initializing @ bottom of page otherwise should move it.