Jeśli chcemy mieć na stronie ładnie wyglądającą galerię zdjęć, ciekawym rozwiązaniem jest zastosowanie skryptu Lightbox napisanego z wykorzystaniem biblioteki jQuery (JavaScript).
Na początek trzeba ściągnąć potrzebne biblioteki. Można to zrobić z oficjalnej strony Lightbox/jQuery: http://leandrovieira.com/projects/jquery/lightbox/. Po rozpakowaniu należy wgrać do folderu z naszą stroną katalogi js, css i images.
Następnie w sekcji <head> naszej strony należy dołączyć biblioteki i arkusz stylów wstawiając kod:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
Również w nagłówku należy wkleić kod:
<script type="text/javascript">
$(function() {
$('#galeria a').lightBox();
});
</script>
To właściwie cała instalacja Lightboxa na naszej stronie. Teraz potrzebujemy tylko zdjęć i ich miniaturek. Sam wygląd galerii możemy opisać w arkuszu stylów naszej strony. Najłatwiej galerię zdjęć stworzyć jako tabelę.
<table class="galeria">
<tr>
<td><a href="zdjecia/1.jpg" title="tytuł zdjęcia 1"><img src="zdjecia/1-mini.jpg" width="100" height="100" alt="tekst" /></a></td>
<td><a href="zdjecia/2.jpg" title="tytuł zdjęcia 2"><img src="zdjecia/2-mini.jpg" width="100" height="100" alt="tekst" /></a></td>
<td><a href="zdjecia/3.jpg" title="tytuł zdjęcia 3"><img src="zdjecia/3-mini.jpg" width="100" height="100" alt="tekst" /></a></td>
</tr>
Na stronie wyświetlane będą miniaturki zdjęć. Po kliknięciu na miniaturkę w oknie rozwinie się oryginalne zdjęcie. Nawigacja pod zdjęciem pozwoli na przewijanie zdjęć.