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.
1 komentarz:
Dzięki ;)
Prześlij komentarz