Lightbox

Stworzymy galerię zdjęć z pomocą biblioteki Lightbox. Korzystanie z tej biblioteki jest proste, a stworzona galeria jest efektowna. Po kliknięciu na miniaturę zdjęcia, strona przesłaniana jest półprzezroczystą czarną warstwą i dopiero na tym tle pokazywane jest powiększenie zdjęcia. Lightbox bazuje na JavaScripcie i kaskadowych arkuszach stylów. Bierzemy się teraz za tworzenie biblioteki. Najpierw trzeba pobrać pliki ze strony. Utwórzmy katalog o nazwie galeria i skopiujmy do niego pliki źródłowe biblioteki Lightbox. Następnie usuńmy plik index.html oraz pliki obrazków image-1.jpg i thumb-1.jpg z podkatalogu images. W katalogu galeria stwórzmy nowy folder o nazwie photos i umieśćmy w nim kilka zdjęć i ich miniaturek. Teraz stworzymy kod galerii. Tworzymy w katalogu galeria nowy plik index.html. Cały kod wygląda następująco

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <title>Galeria</title>
       <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
       <script src="js/prototype.js" type="text/javascript"></script>
       <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
       <script src="js/lightbox.js" type="text/javascript"></script>  

       <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>

  <h1>Galeria</h1>
  
  <a href="photos/photo-1.jpg" rel="lightbox" title="my caption"><img src="photos /photothumb-1.jpg" /></a>
  <a href="photos/photo-2.jpg" rel="lightbox" title="my caption"><img src="photos /photothumb-2.jpg" /></a>
  <a href="photos/photo-3.jpg" rel="lightbox" title="my caption"><img src="photos /photothumb-3.jpg" /></a>
  <a href="photos/photo-4.jpg" rel="lightbox" title="my caption"><img src="photos /photothumb-4.jpg" /></a>

</body>
</html>

Cztery poniższe linijki umieszczone w sekcji head pozwalają na korzystanie z Lightboxa.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
       <script src="js/prototype.js" type="text/javascript"></script>
       <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
       <script src="js/lightbox.js" type="text/javascript"></script>

Galerię tworzymy następująco:

<a href="photos/photo-1.jpg" rel="lightbox" title="my caption"><img src="photos /photothumb-1.jpg"></a>

Każda miniaturka zdjęcia jest objęta znacznikiem <a> z atrybutem href ustawionym na adres do pełnej wersji zdjęcia oraz atrybutem rel="lightbox". Możemy jeszcze utworzyć oddzielny plik stylu css dla naszej witryny, definiując np. kolor tła, czcionki itp. Aby bardziej spersonalizować naszą galerię możemy podmienić pliki grafik nextlabel.gif, prevlabel.gif, closelabel.gif znajdujące się w katalogu images na własne. Jeśli chcemy utworzyć grupę zdjęć (między którymi przechodzić można będzie za pomocą next i prev) należy zmienić atrybut rel="lightbox[zestaw1]" dla każdego zdjęcia z tej grupy, gdzie zestaw1 to nazwa zestawu (grupy) zdjęć. Dodatkową zmienną, którą możemy zmodyfikować wewnątrz pliku lightbox.js jest

var resizeSpeed = 7; // kontroluje szybkość zmiany wielkości obrazka (1=najwolniej i 10=najszybciej)