Nasty

Lightbox 2 - niezdrowa moda na wyświetlanie obrazków

Thursday, 19. July 2007, 00:06:15

lightbox, pop-upy, obrazki, www, popupy, porneL

Od jakiegoś czasu obserwuję, że coraz więcej serwisów, zapewne chcących być "trendy" i "web 2.0", implementuje "efekciarski" sposób wyświetlania obrazków, taki jak tu: http://ludzie.playmobile.pl/photo/ranking. To biblioteka Lightbox, w wersji 2.

Po kliknięciu w obrazek, pokazuje on się nam na jakby wyższej warstwie, w obramowaniu, a reszta strony staje się przyciemnionym tłem. Może przy pierwszym wyświetlanym w ten sposób obrazku wrażenie jest ciekawe, ale później zaczyna to coraz bardziej irytować, przebijając pod tym względem chyba nawet strony we Flash. Ergonomia i funkcjonalność tego rozwiązania jest bowiem skrajnie fatalna. Dlaczego? Zobaczmy, jakie są konsekwencje takiego sposobu pokazywania obrazków.

Niepotrzebnie ograniczona jest widoczność strony - od razu po kliknięciu w obrazek pojawia nam się biała ramka, w której będzie wyświetlony obrazek, a sama strona zostaje przyciemniona - od tego momentu zupełnie nie widzimy reszty strony, jedyne co pozostaje nam robić, to cierpliwie patrzeć się, jak "efekciarsko" ładuje się nam obrazek.
Obrazek pokazuje się zupełnie nieefektywnie - najpierw czekamy na ściągnięcie się obrazka. Gdy został on pobrany (czyli właściwie już w tym momencie można by go pokazać), ramka zaczyna w kilku fazach płynnie, czyli powoli, dopasowywać swój rozmiar - najpierw na odpowiednią szerokość rozsuwana jest pionowa krawędź, dopiero później pozioma i dopiero w trzecim, ostatnim etapie pokazuje się dolny fragment z opisem i przyciskiem Zamknij. Czekać trzeba szczególnie długo, gdy kolejne obrazki są znacząco różnych rozmiarów, bowiem ramka zmienia rozmiar, zaczynając od rozmiaru obrazka poprzedniego.
Nie można szybko i wygodnie zamknąć obrazka - trzeba czekać na możliwość jego zamknięcia do jego pełnego załadowania - dopiero wtedy pojawi się przycisk Zamknij. Przy tym przycisk Zamknij pojawia się za każdym razem w innym miejscu (w zależności od rozmiaru obazka, w dodatku nie zawsze tuż pod obrazkiem, przy małym obrazku pojawia się pod całym jego opisem). Nie można też kliknąć w obrazek, aby go zamknąć, trzeba kliknąć poza jego obszar.

Czyli ten efektowny, choć już po chwili nużący, sposób wyświetlania posiada całą masę utrudnień w obsłudze i użytkownik traci, zupełnie niepotrzebnie, mnóstwo czasu.

Co ciekawe, dużo lepszym rozwiązaniem, pozbawionym większości tych wad jest pierwsza wersja Lightboksa, której przykłady można zobaczyć bezpośrednio na tej stronie: http://www.huddletogether.com/projects/lightbox/

Inną, zdecydowanie bardziej ergonomiczną i funkcjonalną alternatywą jest (dotychczas i chyba nadal często stosowane) wyświetlanie obrazka w nowym oknie, które zamyka się po kliknięciu na ten obrazek. Polecam technikę opracowaną przez porneLa: http://pornel.net/pups/ - pop-upy proste, kompatybilne i semantyczne.

Jeśli zaś chodzi o Lightbox 2, to proponuję i apeluję, abyśmy wszyscy zgodnie wyrzucili go na śmietnik nietrafionych eksperymentów internetowej historii.

Opera Mini jednak rośnie - korekta na ranking.plGmail polubił Operę

Comments

M-Z # 20. July 2007, 20:23

Wreszcie ktoś napisał to, o czym od dawna myślałem. Warto jeszcze dodać (choć to niepolityczne) że Opera jest w takich wypadkach dość powolna, co wkurza dodatkowo.

Anonymous # 8. August 2007, 06:26

zertaul writes:

Większość rzeczy na tym świecie ma swoje wady i zalety. Te "problemy", o których piszesz da się w prosty sposób wyeliminować - zerknij na moją stronę:
http://serviam.pl/index2.php?action=galery
i zauważ, że zadna z opisanych przez Ciebie niedogodność nie ma tu miejsca.

Nasty # 10. August 2007, 07:36

Skoro zlikwidowałeś te problemy, to oczywiste, że nie występują na Twojej stronie. Ja nie pisałem o tym, że się ich nie da usunąć, tylko że standardowe zachowanie Lightboksa 2 - które zazwyczaj jest traktowane jako wzorowe i używane bez przeróbek - jest beznadziejne funkcjonalnie.

Czy to zachowanie się Lightboksa to wynik Twoich autorskich przeróbek, czy można pobrać tę wersję z jakiegoś oficjalnego źródła?

Anonymous # 31. December 2007, 21:28

Drake writes:

Takze posiadam galerie w internecie i uzywam lightboxa 2. Dlaczego? Bo jest wygodny zarowno dla autora jak i dla odwiedzajacego. I Tak samo jak zertaul uwazam, ze skrypt zamieszczony na mojej stronie pozbawiony jest wymienionych przez Ciebie wad. Przerobek? Jakich przerobek? Nie miales czasem na mysli konfiguracji? To, ze trzeba sie danego ustawienia doszukac w pliku tekstowym zamiast w bajerancko podanym GUI nie znaczy od razu, ze dokonujemy jakiegos hackowania. Najzwyklejsza w swiecie konfiguracja. Galeria oparta na popupach? Tzn ze mialbym sie nastawic wylacznie na odwiedzajacych uzywajacych IE? Kazda przegladarka posiada dzis mniej lub bardziej efektywne blokowanie takich "bajerow", ze o antywirusach nie wspomne.

A co do wolno chodzacej opery - czy to napewno dzialka autorow skryptu/strony? Ja uwazam ze wolne dzialanie niektorych skryptow jest sprawa autorow przegladarki. Kogo winicie za niepoprawne wyswietlanie stron pod IE? Microsoft. Kogo winic za zle dzialanie skryptow w Operze? Odpowiedzcie sobie sami :)

Nasty # 6. January 2008, 16:12

Tak, miałem na myśli konfigurację, w ogóle nie zajmowałem się nim od strony webmasteringu, więc nie wiedziałem, że posiada możliwości konfiguracji sposobu działania. OK, jeśli Lightbox jest skonfigurowany w sposób pozbawiony opisanych przeze mnie problemów, to w porządku. Jak już napisałem, mówię o standardowym zachowaniu Lightbox 2, które widzę na 9/10 stron, a które jest dalekie od bycia wygodnym dla użytkownika.

Co do pop-up'ów, to IE też posiada blokowanie, więc jeśli miałyby być tak jak mówisz, blokowane, to w każdej przeglądarce. Ale niektóre - wywołane na życzenie użytkownika - nie są. Przeczytaj artykuł na temat dobrej techniki ich implementacji, do którego podlinkowałem we wpisie.

Co do powolności otwierania się okna, to widzę, że źle zrozumiałeś - chodzi tu o celowo zaimplementowaną w Lightboksie 2 płynną "animację" rozszerzania obszaru podglądu obrazka, a nie o to, że w przeglądarce wolno działają skrypty.

Anonymous # 25. January 2008, 10:04

Anonymous writes:

a ja lubie lightbox'a :-)

Anonymous # 6. February 2008, 14:25

jurek writes:

> Ja nie pisałem o tym, że się ich nie da usunąć, tylko że standardowe
> zachowanie Lightboksa 2 - które zazwyczaj jest traktowane jako
> wzorowe i używane bez przeróbek - jest beznadziejne funkcjonalnie.

I to jest fachowe podejście Software Engineer'a? n/c

Anonymous # 13. February 2008, 08:09

Tomek writes:

A mi ten wpis i komentarze bardzo pomogły. Dziękuje! :-)

Anonymous # 18. March 2008, 21:31

Łukasz writes:

Jak dla mnie to jesteś głupi i szukasz problemów w nie wiadomo czym, używam lightbox od dawna i jestem bardzo zadowolony... Rezygnować z tego bo coś tam nie tak? Dużo lepsze to niż otwieranie obrazka w nowym oknie... A jak jesteś taki mądry to zrób lepsze...

Nasty # 30. March 2008, 17:42

jurek: Niefachowe jest to, że Lightbox domyślnie jest skonfigurowany bardzo nieergonomiczne i niefachowe jest jego używanie w takiej domyślnej konfiguracji - z czym spotkałem się często, więc o tym napisałem.

Łukasz: Z całym szacunkiem, ale nie chodzi o to, żebyś Ty był zadowolony, a osoby odwiedzające Twoją stronę. Nie trzeba z niego rezygnować - jak zostało wyjaśnione, da się go skonfigurować ergonomicznie, przeczytaj artykuł i komentarze.

Anonymous # 28. April 2008, 08:35

Anonim writes:

Gdzie widzisz tą NIEERGONOMICZNOŚĆ ?
1. Czy bardziej ergonomiczne jest klikanie w każdy obrazek i czekanie aż otworzy ci się kolejne okno przeglądarki?
2. Klikasz w obrazek, którego nie chcesz oglądać? Gratuluję logiki działania.
3. Lightbox2 jest wygodnym sposobem na zamieszczenie miniaturki i "jednocześnie" pe lnej wersji fotki, a "tanie efekciarstwo", no cóż dziwne ,masz do tego podejście, bo kierując się tą logiką strony wyglądałyby nadal jak w 95 roku, zero drobnych wodotrysków-umilaczy oglądania.
4. Jak sam napisałeś - nie zaglądałeś w opcje Lightbox`a - więc czemu go oceniasz? Najpierw sprawdć o czym piszesz, a potem krytykuj.
Widzisz... zmiana tych irytujących drobiazgów zajmuje 10 sek., ale tzreba chcieć.
5. Sposób wyświetlania i rzekome oczekiwanie na cokolwiek - bzdura, to wg Ciebie lepiej jest załadować kolejną stronę tylko dla jednej fotki, zresztą na tej stronie i tak przeglądarka najpierw zarezerwuje miejsce na obrazek, czyli dostaneisz pusta ramkę, a dopiero po wczytaniu fotki zostanie ona wstawiona.
Twój argument o szybkości zawiera w zasadzie wniosek, że lightbox spowalnia ładowanie stron.

Anonymous # 16. June 2008, 11:35

yanoo writes:

jak ci lightbox nie pasuje, to zawsze możesz otwierać zdjęcia w nowym oknie - szybko i bez efektów

Anonymous # 17. June 2008, 12:00

Naglfar writes:

Lighbox2 jest moim zdaniem bardzo wygodny, jednak poważnym mankamentem jest powolność animacji, nawet na bardo dobrych komputerach.

Można na to łatwo zaradzić - usunąć animacje. Wystarczy w kilku miejscach kodu wstawić funkcje show() i hide() zamiast funkcji tworzących animacje.

Anonymous # 5. August 2008, 20:11

Anonymous writes:

"Nie można szybko i wygodnie zamknąć obrazka - trzeba czekać na możliwość jego zamknięcia do jego pełnego załadowania - dopiero wtedy pojawi się przycisk Zamknij."

Istnieje taki przycisk maiczny jak ESC i się zamyka nawet jak się wczytuje zdjęcie.

Zamiast pisa bzdury lepiej doczytaj dokumentację

Anonymous # 18. August 2008, 10:27

WiruSSS writes:

lub wystarczy kliknąc poza obrazkiem i animacja zostaje przerwana ;) ...lightbox to jedna z tych rzeczy które posunęły ergonomię przeglądania obrazków do przodu a zarzuty tutaj przedstawione są conajmniej śmieszne i do tego bezpodstawne ...jakkolwiek lightbox bylby ustawiony i taj wolałbym oglądac obrazki w ten sposób niż w idiotyczny moim zdaniem w nowym oknie.

PS. komentarze tutaj także świadczą o wyższości ligtboxa nad kazdym innym rozwiązaniem.

Paweł Zioło # 30. November 2008, 09:58

Nasty.
A środkowego klawisza myszki (po mojemy kółkoklika) na tych obrazkach nie mozesz użyć?

I masz obrazki w osobnych kartach otwarte.
Widzę sens lightboxa w galeriach, w końcu to są strony o zdjęciach :} do tego można go obejść SAMODZIELNIE otwierając zdjęcia w osobnych oknach albo kartach.

Anonymous # 30. November 2008, 19:15

Anonymous writes:

lighbox ma wady akurat nie te ktorych piszesz bo to ze trzeba zaczekac na zaladowani sie zdjecia to chyba nie jest wada lighboxa a Twojego lacza. Natomiast lighbox w wersji 2 jest duzo bardziej przyjazna niz wersja 1 obsluga jest szybsza animacja, ladna i bardziej naturalna - czekam tylko az pojawi sie mozliwosc uzycia scroolbarow dla niskich rozdzielczosci pulpitow klony lighboxa takie cos maja ale z kolei nie maja tego co ma lighbox

Anonymous # 5. December 2008, 12:38

Anonymous writes:

Chciałem zauważyć, że otwieranie linków w nowych oknach (w tym przypadku obrazków) jest niezgodne z wytycznymi W3C, element _blank został usunięty ze specyfikacji XHTML.

Anonymous # 6. December 2008, 20:28

el_passo writes:

Te problemy są dosłownie wyssane z palca. Po pierwsze możesz anulować ładowanie obrazka poprzez kliknięcie na przyciemnionym obszarze, nie trzeba czekać na załadowanie. Po drugie efekty ładowania nietrwają tak długo, nie przesadzajmy ;)

Anonymous # 6. January 2009, 19:31

olo writes:

Co wy tacy nadgorliwi. Lightbox w wersji 2 z domyślnymi ustawieniami jest irytujący. Jeszcze ta animacja wolna, wrr, trzeba podłubać w kodzie by nadawało się do użytku. Takie efekty są interesujące ale tylko w pierwszej chwili, potem zaczynają drażnić.

O wiele bardziej przypadł mi do gustu lightbox1, ewentualnie highslide po przeróbkach.

Anonymous # 24. January 2009, 19:59

elon writes:

Otwieranie w nowych oknach przy przeglądarkach zamykających całą nawigację w kartach to jakaś lipa.

Argumenty z art. są tak naciągane, że szok. Ew. ten ze zmiennym miejscem zamykania, ale w wyskakującym oknie masz inaczej?

@olo
"O wiele bardziej przypadł mi do gustu"
Dajże spokój - jak argumentem staje się gust znaczy, że nie ma argumentu :)

@Nasty
"A środkowego klawisza myszki (po mojemy kółkoklika) na tych obrazkach nie mozesz użyć? :D I masz obrazki w osobnych kartach otwarte"
A IE6? W ogole zią.. ten link z popupami jest super - koleś odsiewa ze swojej strony ponad połowe userów nie obsługując IE..

Śmiechu warty ten artykuł

Anonymous # 7. February 2009, 23:57

Zawodowy Webdesigner/ Developer Amator writes:

BUUUUU!!!! BUUUUU !!!!!
Artykuł napisany bez sprawdzenia możliwości skryptu...
Krytykuj amatorskich webdesignerów a nie developerów...
Amatorka... tyle na ten temat.

PS. Czekam na LB3 twojego autorstwa, bo jest tam jedna rzecz do poprawy, ale nie zdradzę jaka... :]

Anonymous # 19. November 2009, 10:31

Jakub Kukuryk writes:

Lightbox 2 jest typu open source i każdy element można zmienić,
od prędkości po rozmieszczenie elementów na stronie i gdzie trzeba kliknąć.

"przebijając pod tym względem chyba nawet strony we Flash"

Flash to technologia która współpracuje równie dobrze z javą, php i MySQL itp. Chyba cierpisz na syndrom "ja wiem najlepiej i to czego używam jest najlepsze a wszystko inne to blee.

Anonymous # 7. December 2009, 14:57

Anonim writes:

Ciekawe dlaczego Lightbox działa płynnie w FF, Chrome i nawet IE. Jak zwykle wielbiciele Opery nie dopuszczają do siebie myśli, że to Opera jest spieprzona, a nie ten skrypt.

Anonymous # 9. December 2009, 14:09

Anonim writes:

A ja mam dosc slaby laptop i otwieram lightoxa opera i nie widze zadniego spowolnienia.
Chyba ze ktos ma bardzo archaiczny sprzet, to wtedy ma problem ale nie tylko z lightboxem ale i wszechobecnym flashem.
Niektorym sie moze zwoje przegrzaly i koniecznie chca udowodnic ze lightbox jest beeee.

Niech nie uzywaja lightoxa, nie wchodza na takie strony i bedzie ok.

Anonymous # 9. December 2009, 15:06

programmer writes:

tak jak ktos tu wspomnial w komentarzach...

piszesz o czyms o czym nie masz pojecia. wiekszosc rzekomych wad przez ciebie wymienionych konfiguruje sie w skrypcie!!!

WEJDZ NA STRONE PRODUCENTA zanim zaczniesz omawiac cokolwiek i poczytaj troche...

przykro to stwierdzic ale ten artykul to beznadziejny bełkot osoby ktora nie ma wiedzy na ten temat.

ZAJMIJ SIE POLITYKA lepiej moze...