Fancybox – long picture = problem with overlay

Recently i needed a replacement for lightbox which is based on prototype framework, but this time i needed something based on jQuery.

Since the term was chasing me, and i didn’t have time for testing and whining, I choose Fancybox.

It’s quite simple. You can set it for specific id, class or even for every picture which is in link. The last one is very useful.

Plus i can disable automatic scale picture to fit screen by setting false to ‘autoScale’ (it’s on by default).

The problem is when picture is longer than page. The overlay ends at the height of the footer and not cover entire page.

As you see the overlay is cut off and farther you can see original background.

First hint from uncle google was: “Probably you set body height”.

Ok. Indeed, it was set to height : 100%. I removed it but problem remained.

I wanted to give up and set overlay to background color when i saw another potential solution.

So, if you have the same problem as I.

In fancybox.css file you just need to change selector value – #fancybox-overlay from position:absolute to position:fixed.

It’s working! :o)

Summarizing:

Body height can not be set and #fancybox-overlay must be change to the position:fixed in fancybox.css file.