czwartek, 16 czerwca 2011

Sprytna galeria czyli Lightbox 2.0

Dzisiaj chciałbym przedstawić małą sprytną galerię. Nazywa się Lightbox (nazwa pochodzi zapewne od sposobu wyświetlania zdjęć - o tym za chwilę). Pewnie spotkałeś się nie raz z tym, że jeśli klikasz miniaturkę zdjęcia na stronie internetowej to w efektowny sposób pojawia się duże zdjęcie.



Przykład działania skryptu na stronie www.tokwiaciarnia.pl

Najprawdopodobniej webmaster tej strony zastosował galerię lightbox. Na jej temat zdania są podzielone. Niektórzy mówią, że jest to wspaniały skrypt, inni że jest denerwujący i nie powinien być stosowany. Nie mniej jednak jest to ciekawy przykład zastosowania javy, który w prosty sposób możesz zaimplementować do własnej strony. Dalej pokażę Ci jak to zrobić.

Krok 1.
Pobierz skrypt Lightbox ze strony: http://www.huddletogether.com/projects/lightbox2/#download

Rozpakuj i umieść pliki na serwerze w katalogu głównym naszej strony.
Ważne: katalogi images oraz js muszą pozostać w katalogu głównym to znaczy tam gdzie znajduje się strona na której ma być zainstalowana galeria.

Krok 2.
W sekcji <HEAD> swojej strony wstawiasz następujący kod:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Krok 3.
Również w sekcji <HEAD> wstawiasz kod:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

lub jeśli twoja strona korzysta z kaskadowych arkuszy styli (CSS) możesz skopiować zawartość pliku lightbox.css do swoich styli.

Krok 4.
Dodaj atrybut rel="lightbox" do linku w którym chcesz wykorzystać galerię lightbox. Na przykład:

<a href="images/zdjecie_1.jpg" rel="lightbox">zdjęcie 1</a>

lub z miniaturką:

<a href="images/zdjecie_1.jpg" rel="lightbox"><img src="images/miniaturka_1.gif"></a>

Możesz również dodać atrybut title="tytuł zdjęcia" który wyświetli się na dole ramki wyświetlonego zdjęcia np.:

<a href="images/zdjecie_1.jpg" rel="lightbox" title="zdjęcie 1" ><img src="images/miniaturka_1.gif"></a>

Krok 5.
Możesz stworzyć relacje między zdjęciami w atrybut rel wpisując nazwę grupy między kwadratowymi nawiasami np. rel=lightbox[samochody]:

<a href="images/honda.jpg" rel="lightbox[samochody]">Honda</a>
<a href="images/jaguar.jpg" rel="lightbox[samochody]">Jaguar</a>
<a href="images/porsche.jpg" rel="lightbox[samochody]">Porsche</a>

W ten sposób po kliknięciu np. zdjęcia Honda będzie można przejść do następnych zdjęć z grupy [samochody], ale jeśli na tej samej stronie będzie umieszczona galeria innej grupy np. [rowery] nie będzie można do niej przejść przez wyświetlenie zdjęcia z grupy [samochody] i kliknięcie następne zdjęcie. Przejście do grupy [rowery] będzie możliwe tylko przez zamknięcie zdjęcia z grupy [samochody] i kliknięcie zdjęcia z grupy [rowery].

Nie ma limitu ilości grup oraz zdjęć w danej grupie na jednej stronie.

Krok 6.
Możesz zmodyfikować zawartość styli lightbox:

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} // pozycja lightbox'a na ekranie
#lightbox img{ width: auto; height: auto;} // szerokość i wysokość ramki (domyślnie dopasowana do zdjęcia
#lightbox a img{ border: none; } // czy zdjęcie ma być w dodatkowej ramce? (domyślnie nie)

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } // pozycja paska postępu logowania
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } // pozycja nawigacji
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } // zakres działania i wygląd przycisków Previous (poprzednie) i Next (następne)
#prevLink { left: 0; float: left;} // pozycja przycisku Previous (poprzednie)
#nextLink { right: 0; float: right;} // pozycja przycisku Next (następne)
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } // wygląd opisu zdjęcia

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } // szczegóły zdjęcia wygląd
#imageData #caption{ font-weight: bold; } // czcionka tytułu
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } // wygląd numerowania zdjęć
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} // wygląd i umiejscowienie przycisku Close (zamknij)

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } // wygląd ramki zdjęcia (oraz cienia pod ramką)

Jeśli chodzi o przyciski, które są w języku angielskim to można je przerobić na polski. Trzeba tylko pamiętać aby nie zmieniać ich położenia ani nazwy bo mogą przestać działać.

Uwaga: skrypt może nie działać poprawnie na niektórych przeglądarkach. Z tego co mi wiadomo to dobrze radzi sobie na IE oraz Firefoxie. Jednak ma problemy np. na Google Chrome.