Fancybox – problem z overlay przy długich obrazkach

W ostatnim czasie poszukiwałam alternatywy dla lightbox‘a zbudowanego na framework’u prototype, tylko tym razem potrzebowałam wersji pod jQuery.

Ponieważ termin mnie gonił, testować ani wybrzydzać nie miałam czasu, mój wybór padł na Fancybox.

Jest bardzo prosty i przyjemny. Można ustawić aby odpalał się dla konkretnego id, klasy lub nawet dla wszystkich obrazków w linkach. To ostatnie jest bardzo wygodne.

Dodatkowo mogę wyłaczyć sobie automatyczne skalowanie do romiaru ekranu poprzez ‘autoScale’ : ‘false’ (domyślnie jest włączone).

Problem pojawił się w momencie gdy obrazek był dłuższy niż sama strona. Wówczas overlay kończył się na wysokości stopki, a nie pokrywał całej strony.

Jak widać overlay jest ucinany a niżej widać orginalne tło strony.

Pierwszą podpowiedzią wujka google było: “Zapewne jest ustawiona wysokość body”.

Ok. Rzeczywiście body ustawione zostało na height:100%. Jednak po usunięciu tej własności problem dalej występował.
Już chciałam się poddać i ustawić overlay w kolorze tła, kiedy moim oczom ukazało się kolejne rozwiązanie.

W pliku fancybox.css wystarczyło jeszcze zmienić wartość selektora: #fancybox-overlay – position:absolute na position:fixed

Działa :o)

Podsumowując

Body nie może mieć ustawionej wysokości i należy zmienić #fancybox-overlay na position:fixed w pliku fancybox.css.