<autoreklama>
Rewolucyjne Witryny Internetowe tani CMS szablony dla stron www retusz zdjec
</autoreklama>

LightBox, ThickBox, GreyBox i LyteBox: Overlay na WWW

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

Tagi: , , , ,

17 komentarzy do “LightBox, ThickBox, GreyBox i LyteBox: Overlay na WWW”

  1. lato_p napisał(a):

    Lightbox2 korzysta z jQuery?

    Cytat ze strony Lightbox2:
    Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library.

    jQuery gryzie sie z innymi frameworkami?

    docs.jquery.com/Using_jQuery_with_Other_Libraries

  2. uranik napisał(a):

    Racja, coś mi się pomieszało. LightBox korzysta z Prototype oczywiście. Już poprawiłem. Ale to, że biblioteki mogą się „pogryźć”, jest niestety faktem.

  3. Gość napisał(a):

    A gdzie LightWindow? stickmanlabs.com/lightwindow

  4. nightman napisał(a):

    „musiałem kombinować żeby połączyć dwie różne klasy CSS” – przecież można bez problemu użyć konstrukcji typu:

  5. nightman napisał(a):

    class=” klasa1 klasa2 klasa3″

  6. REGi napisał(a):

    fajne motywy z tymi systemami ;D sam też taki posiadam :) i montuję na stronach klientów.

    pozdr

  7. rrriddle napisał(a):

    To co tam umieściłem poprawiłem dodatkowo już bez publikacji i masz rację – na bazie tego CSS zbuduję „RiddleBoksa” jako plugin do jQuery ;-)

    Tylko nie wiem kiedy skończę. :)

  8. Gość napisał(a):

    Rewelacyjne porównanie!

  9. marecki napisał(a):

    Znam jeszcze ImageBox z jquery’owego dodatku pt. Interface. (interface.eyecon.ro/)
    Ostatnio natrafiłem też na Highlight JS, ale niestety jest płatny przy zastosowaniach komercyjnych, a posiada dosyć ciekawe rozwiązanie – skaluje z wycinaniem linii, ale można dalej powiększyć do oryginalnego rozmiaru… (vikjavev.no/highslide/)

  10. YEAH napisał(a):

    LightBox2 ma dodatkowo jeszcze jedną POWAŻNĄ wadę: przy dużej ilości zdjęć na stronie (np: galeria) stopka pod zdjęciem pojawia się i znika. Nieładnie to wygląda w FF i OPERZE, a IE tego nie odczuwa!!!! :(

  11. Gość napisał(a):

    Jeszcze tylko Highslide’a brakuje
    vikjavev.no/highslide/

  12. Marcin napisał(a):

    super jest ten ostatni system, niestety dla komercyjnych systemów płatny ale według mnie najpłynniej i przyjaźnie otwiera zdjęcia. W tej chwili używam Lightbox2 ale po tym ostatnim linku chyba zmienię ;-) dzięki za info no i dla autora podziękowania za takie zbiorcze porównanie

  13. Xenon napisał(a):

    Siemka Uran.

    Właśnie szukałem czegoś żeby zastąpić lightbox2, bo się gryzie z innymi skryptami a w IE potrafi całą stronę wywalić i się natknąłem na twojego arta (:

    pozdro

  14. Smook napisał(a):

    Jest jeszcze Slimbox http://www.digitalia.be/software/slimbox2 :)

  15. pdziok napisał(a):

    jeżeli chodzi o thickboxa i jego 3 minusa to nie masz racji
    nie testowałem bo odpowiada mi to w takiej formie jakiej jest, ale wykorzystywałem funkcję tb_show na kilka różnych sposobów np na robienie „popupów” ktorych nawet opera nie potrafi zblokować :)

  16. Gyngus napisał(a):

    Co zrobić by okno LyteBox’a otwierało się automatycznie podczas wczytywania strony?

  17. Adam napisał(a):

    Highlight JS jest absolutnie fantastyczny. Widziałem kiedyś na przypadkowej stronce, od razu zapragnąłem mieć w swoim sklepie, który właśnie stawiam. Szukałem, szukałem który to skrypt za ten bajer odpowiada i znalazłem… tutaj. Trochę z innej beczki – podobnie działa ajaxowy koszyk zakupów w Prestashop – zrób zakupy(demo) demo.prestashop.pl/
    Teraz mam dwa bajery do kompletu :)

Dodaj odpowiedź