Ostatnio podczas projektowania pewnych dwóch witryn chciałem zastosować otwieranie obrazków oraz prezentacji Flash jako okienka overlay. Dosyć dokładnie przetestowałem gotowe cztery rozwiązania takiej funkcjonalności: LightBox, ThickBox, GreyBox i LyteBox. Wszystkie mają swoje plusy i minusy, o czym chciałbym opowiedzieć w tym wpisie.
LightBox
Na pierwszy ogień poszedł, już chwalony przeze mnie na Subiektywie, LightBox. Otóż LightBox jest niemal świetny – działa płynnie i bezawaryjnie. Na pewno na plus zasługują (+) łatwa instalacja i (+) świetne animacje zmian rozmiarów obrazków oraz wysuwania się podpisu, które wyglądają bardzo efektownie. Prawie (+) wszystko jest ładnie konfigurowalne. Ale są też i wady: Otóż (-) LB nie zadziała przed pełnym załadowaniem całej witryny: gdy klikniesz na linka go wywołującego przed zakończeniem wczytywania strony – obrazek otworzy się w nowym oknie. Drugi minus jest jeszcze poważniejszy: (-) LB umożliwia wyświetlanie w overlayu tylko obrazków! I trzeci minus: (-) LB korzysta z biblioteki jQuery Prototype. A jak wiadomo, różne biblioteki js potrafią się ze sobą „gryźć”.
ThickBox
Na stronie LightBox’a autor zamieszcza link do ThickBoxa, który umożliwia wyświetlanie nie tylko obrazków, ale także wszelkich innych treści w okienku overlay. No cóż: coś za coś – ThickBox (-) nie jest już tak atrakcyjny wizualnie, nie animuje się i szczerze mówiąc wygląda trochę topornie. Mimo że (+) potrafi wyświetlać wszystko, po dwóch dniach testów zrezygnowałem z jego używania. Dlaczego? Otóż odkryłem dwa poważne mankamenty w działaniu TB: 1) (-) Gdy wyświetlany obrazek nie mieści się w obszarze okna, TB go automatycznie skaluje w dół. Niestety skaluje przez wycinanie linii, co wygląda tragicznie. 2) (-) Nie wiem dlaczego, w IE okienko TB pojawiało mi się zawsze blisko górnej krawędzi witryny, mimo że odpalałem TB z miejsca oddalonego o około 1000px poniżej. To wyklucza jakąkolwiek użyteczność (na witrynie z demonstracją TB działa dobrze, ale u mnie nie pomogła nawet podwójna reinstalacja TB i instalacja na świeżo na innej stronie). 3) (-) Zaznaczenie linka który ma być odpalany przez TB odbywa się za pomocą przypisania klasy „thickbox”, co może bruździć nam w naszym layoucie – ja musiałem kombinować żeby połączyć dwie różne klasy CSS. W innych rozwiązaniach overlayowych odbywa się to za pomocą przypisania parametru rel lub onClick, co jest wygodne i pożyteczne. 4) No i na dokładkę, (-) ThickBox korzysta z jQuery. Za to także całkiem fajnie się instaluje i konfiguruje (+). :)
GreyBox
Nasz kolejny bohater jest trochę podobny do ThickBoxa. GreyBox (+) nie korzysta z żadnych bibliotek zewnętrznych, co oczywiście idzie mu na plus – wykorzystać go można wszędzie. Wygląda dobrze (choć to odczucie może być subiektywne). Co prawda nie ma tak wypasionych animacji jak LB, ale wygląda i zachowuje się estetycznie (IMO bardzo fajnie wygląda przeglądarka zdjęć). Odpalany jest przez funkcję JS opisaną w onClick, czyli wygodnie. Poza tym pozbawiony jest dziwnych zachowań w IE, wszędzie zachowuje się tak samo. (+) Instalacja też bez zastrzeżeń. Na minus natomiast zasługuje trochę utrudniona konfiguracja – (-) nazwy klas w CSSie nie są przejrzyste i intuicyjne, wiele rzeczy trzeba kilka razy poprawiać żeby uzyskać pożądany wygląd. Poza tym GB bardzo mi się spodobał i to właśnie na niego padł mój wybór.
LyteBox
LyteBox jest w zasadzie podobny do LightBoxa (może dlatego że na nim bazuje), ale (+) potrafi wyświetlać iframki (a więc potrafi w okienku overlay wyświetlić (teoretycznie) wszystko, co potrafi wyświetlić przeglądarka). (+) Wygląda estetycznie i ładnie się animuje, chociaż brak mu tego „klimatu”, jaki da się odczuć podczas używania LightBoxa. (+) Posiada przydatną opcję auto-slideshow, dzięki której nadawałby się świetnie do zaawansowanych galerii zdjęć, gdyby nie fakt że posiada ten sam mankament, co ThickBox – (-) skaluje zdjęcia przez wycinanie linii, dopasowując się do rozmiarów obszaru wyświetlania strony. I – chociaż IMO poważny, to był jego jedyny minus. LyteBoxa (+) instaluje i konfiguruje, a także używa się bardzo wygodnie i intuicyjnie. Nie wymaga on żadnych zewnętrznych bibliotek (choć w poprzednich wersjach korzystał z Prototype). Linki otwierane LyteBoxem definiuje się parametrem rel, więc nasze style linków pozostają naszymi stylami :)
RiddleBox ;)
Na swoim blogu PerfectionOrVanity.com (BTW nowy lay jego bloga jest bardzo fajny, jak i nowa nazwa – bardzo trafna. Chociaż za pierwszym razem przeczytałem PerversionOrVanity ;)), Riddle opracował i opisał rozwiązanie otwierające okienko overlay, wykorzystując głównie CSS, a minimalizując użycie JavaScript. Co prawda, jego rozwiązania nie testowałem, ale wygląda obiecująco. Zamieszczam więc link jako bonus.
Bardzo prawdopodobne (a nawet pewne!) jest istnienie innych rozwiązań wyświetlania overlayowych okienek, których nie opisałem w tym wpisie. Postaram się nadrobić te braki w najbliższej przyszłości.
Istnieje metoda na umieszczenie napisu wykonanego dowolnym krojem czcionek na stronie WWW. Napis tak umieszczony będzie „zaznaczalny” i „kopiowalny” – słowem, będzie zachowywał się tak jak powinien. Co ważne – crawlery wyszukiwarek będą ten napis widzieć w sposób naturalny, czyli zastosowanie tej metody nie wpłynie ujemnie na SEO ani dostępność. Działa pod wszystkimi popularnymi przeglądarkami.
