Estetyka i swoboda jednocześnie...
10 kwietnia, 2007
Na blogu Riddle'a przy okazji wpisu na temat okienek a'la Lightbox, pojawiła się ciekawa dyskusja w której niektórzy stwierdzili, że tego typu okienka ograniczają swobodę użytkownika. Mam pewien pomysł, który pogodziłby zwaśnione strony ;) Od razu jednak uprzedzam, że przykład prezentowany w dalszej części wpisu powstał nie po to by dać gotowe rozwiązanie, a jedynie zaprezentować samą ideę rozwiązania problemu. Zatem zapraszam do lektury użytkowników Firefoxa przede wszystkim ;)
Od razu zaprezentuję przykład, a później go omówię - działa tylko na Firefoxie i korzysta z paru funkcji zapożyczonych z mootools. Nie tworzyłem wersji kompatybilnej z innymi przeglądarkami ponieważ wymagałoby to większej ilości kodu lub użycia mootools po prostu, a generalnie po pierwsze - ten wpis ma przedstawiać tylko ideę rozwiązania problemu z działającym przykładem, po drugie - Lightbox oparty jest o prototype i script.aculo.us, więc trzeba by sporo pogrzebać w kodzie, a czasu mam niewiele ostatni więc musicie wybaczyć - dam Wam wędkę, rybkę złowicie sami ;]
Teraz jaka jest idea działania - stworzyłem skrypt JavaScript, który ma za zadanie pobrać wszystkie elementy odnośników (tagi a) z dokumentu. Następnie skrypt wybiera z nich tylko te które zawierają atrybut rel o wartości lightbox lub lightbox[roadtrip]. Następnie z tych elementów tworzona jest tablica. Dla każdego elementu jest wykonywana operacja usunięcia wartości atrybutu rel, która jest kopiowana do nowego szablonu linka. Dodatkowo kopiowane są atrybuty title i href (ale tylko kopiowane bo muszą zostać w bazowym linku). Na koniec pozostaje już tylko stylizacja nowego linka tak by został wypozycjonowany w górnym rogu obrazka.
Dodam jeszcze, że skrypt musi być umieszczony przed skryptem lightbox.js - zamiana musi się dokonać zanim lightbox zindeksuje linki dla efektu ;)
Błąd z zagnieżdżaniem linków został popełniony specjalnie ;] Dla minimalizacji ilości kodu - dzięki temu można skorzystać z a:hover by pokazać obrazek do powiększania grafiki, zamiast zdarzenia onmouseover i odwoływania się do elementów po id. Skrypt działa w ten sposób, że po najechaniu na grafikę użytkownik ma dwie możliwości do wyboru - albo otwierać w tradycyjny sposób obrazek, albo użyć do tego celu Lightboxa. Oczywiście rozwiązanie z pojawianiem się przyciska do powiększania grafiki z użyciem Lightboxa po najechaniu na obrazek jest tylko przykładem. Równie dobrze może on znajdować się w tym miejscu cały czas by bardziej przyciągnąć uwagę użytkowników. Tak samo link, który u mnie w przykładzie jest zagnieżdżony w innym linku można wstawić zaraz po bazowym linku. Wtedy też go odpowiednio pozycjonujemy (najłatwiej do prawego dolnego rogu) i musimy dodać zdarzenie onmouseover dla obrazka jeśli chcemy by się pojawiał dopiero po najechaniu na daną grafikę. Ewentualnie można umieścić link bazowy i link wygenerowany w innym elemencie i jemu stworzyć pseudoklasę :hover
Możliwości rozwiązania problemu jest naprawdę sporo przy obraniu kierunku jaki ja obrałem. Oczywiście wiąże się to z dodatkowym kodem, ale kilka dodatkowych kB przy kilkudziesięciu kB jakie waży Lightbox raczej nikomu już różnicy nie zrobi :)
I przypominam jeszcze, że ten wpis miał jedynie zaprezentować ideę rozwiązania problemu - stąd mało kompatybilny z przeglądarkami i niezgodny ze standartami kod przykładu ;) Dlatego też celowo nie prezentuje tu fragmentów kodu by mi nikt nie mówił, że wpajam mu złe nawyki ;) Do kodu zaglądacie na własną odpowiedzialność ;)
Prawdopodobnie wykorzystam ten pomysł przy okazji pisania plugina do mootools tworzącego okienka a'la Lightbox ;)
Komentarze do wpisu "Estetyka i swoboda jednocześnie...":
1.
Riddle napisał(a):
10 kwietnia 2007, 16:56:57
Dobre. Dobre! Bardzo fajny pomysł, props.
2.
Dziudek napisał(a):
10 kwietnia 2007, 17:00:48
@Riddle – tylko dopieścić kod by był kompatybilny z resztą przeglądarek i nie zawierał tego błędu zagnieżdżenia linka ;) No i IMHO najlepiej by było takie rozwiązanie podpiąć pod efekt zrobiony z użyciem mootools albo jQuery, bo Lightbox jest ciężki ;]
3.
chlitto napisał(a):
10 kwietnia 2007, 19:08:38
przed opublikowaniem bym ten przyklad troche „ubarwil” ale moze byc:)
4.
Komar napisał(a):
10 kwietnia 2007, 19:08:45
Świetne, tylko zmieniłbym nieco link tzn. klik na cały obrazek to lightbox, a klik na ikonkę w prawym górnym rogu to popup/bezpośredni link do zdjęcia.
5.
Dziudek napisał(a):
10 kwietnia 2007, 19:43:07
@chlitto – to miał być tylko prosty przykład, koncept taki ;) Wersja wykorzystująca to – w pełni funkcjonalna pewnie kiedyś (w domyśle po maturze) zostanie napisana ;]
@Komar – dzięki Tobie mam kolejną opcję do dodania w skrypcie ;) Muszę jeszcze pomyśleć jak to zrobić, żeby user wiedział, że ma dwie możliwości choćby był laikiem ;]
6.
Andrej Kobylański napisał(a):
10 kwietnia 2007, 20:08:22
Ciekawe, tylko problem się pojawi jeśli linkiem do obrazka będzie jakiś fragment tekstu w treści strony, a nie jego miniaturka. Lepszym rozwiązaniem byłoby gdyby możliwość skopiowania adresu obrazka pojawiła się już po otwarciu. Wtedy klient obejrzy sobie obrazek i zdecyduje czy go zamknąć czy skopiować. A można pójść dalej i np dać przycisk: „Zapisz na dysku”, „Wydrukuj” itp. Zresztą coś takiego jest w IE na dużych obrazkach.
7.
Dziudek napisał(a):
10 kwietnia 2007, 20:15:28
@Andrej Kobylański – dlatego kod wymaga dopracowania :) Trzeba by pokombinować z pozycjonowaniem względem obrazka i zwykłego linka. Obrazek do powiększania zapewne będzie posiadał jakiś spory z-index więc nie wpłynie na wygląd reszty strony przy najechaniu na link – obrazek. Ale to już są zabawy z CSS, JavaScript i DOM – sprawdzałoby się czy dany link posiada dziecko w postaci obrazka czy nie ;) Propozycja z przyciskami ciekawa – w przeglądarkach innych od IE nie trzeba by walczyć z menu kontekstowym – jeden klik i po bólu – czego się nie robi dla usera ;) Przemyślę to ;)
8.
Pizzadude napisał(a):
12 kwietnia 2007, 16:40:25
Pomysł jest świetny. ;)
Dodaj komentarz: