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?

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 :

... 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 :

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.