Kontakt | Tworzenie stron... 

Tworzenie galerii LightBox  

Część 1 - Ustawienia

1.Lightbox v2.0 używa Prototype Framework i Scriptaculous Effects Library. Należy zatem w nagłówku strony dolinkować następujące trzy pliki Javascript.
<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>
2. Dołącz plik CSS galerii Lightbox CSS (albo umieść style Lightbox w nagłówku strony [styl osadzony]).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3.Sprawdź czy w piku CSS jest prawidłowo ustawiona ścieżka do rysunków prevlabel.gif i nextlabel.gif. Podobnie sprawdź, czy prawidłowo ustawiono adres do plików loading.gif i closelabel.gif umieszczony w pliku lightbox.js .

Część 2 - Używanie

1.Dodaj atrybut rel="lightbox" do każdego linku, który ma być aktywny w lightbox. Na przykład:

<a href="images/image-1.jpg" rel="lightbox" title="mój opis">image #1</a>
Opcjonalnie: Można użyć atrybutu title jeżeli dla obrazka ma być widoczna etykieta.

2. Jeżeli chcesz, aby galeria dotyczyła grupy rysunków, należy wykonać jeszcze jeden krok - dodać nazwę grupy pomędzy nawiasami kwadratowymi w atrybucie rel. Na przykład:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Nie ma ograniczeń na ilość zdjęc w galerii, bądź wielkość zbioru.

Pliki

Pliki potrzebne do zbudowania galerii. Kliknij aby pobrać

Program IrfanView (przeglądarka graficzna) Pobierz

Osoby mniej cierpliwe odsyłam do narzędzia dostępnego na stronie: http://visuallightbox.com/pl/index.html



Materiał opracowany na podstawie (www.lokeshdhakar.com/projects/lightbox2).