Galeria jQuery Lightbox w Lectorze

W jaki sposób osadzić galerię jQuery Lightbox w Lectorze? Poniżej przedstawiam przykład implementacji Lightboxa opartego o jQuery pochodzącego stąd: http://leandrovieira.com/projects/jquery/lightbox/.

Przykład

Kliknij, aby uruchomic przykład w osobnym oknie:

Lectora - implementacja jQuery Lightbox
Pobierz AWT

Jak to osadzić w swoim AWT?

Krok 1: Po pobraniu i rozpakowaniu pliku archiwum otwórz znajdujący się tam plik AWT.
Krok 2: Skopiuj obiekt „jQuery-Gallery-Components” do swojego AWT.
Krok 3: Stwórz kod HTML dla swojej galerii – zbuduj kod na przykładzie obiektu „Gallery”:

<script type="text/javascript">
$(function() {$('#gallery a').lightBox();});
</script>
<div id="gallery">
<a href="golden.jpg" title="Golden Forest">
<img src="golden-small.jpg" width="150" height="100" alt=""/></a><br>
<a href="water.jpg" title="Water">
<img src="water-small.jpg" width="150" height="100" alt=""/></a><br>
<a href="waterfall.jpg" title="Waterfall">
<img src="golden-small.jpg" width="150" height="100" alt=""/></a><br>
<a href="winter.jpg" title="Winter">
<img src="winter-small.jpg" width="150" height="100" alt=""/></a>
</div>

Krok 4: Dodaj „External HTML Object” w swoim AWT i umieść w nim kod z poprzedniego kroku.
Krok 5: Dodaj swoje zdjęcia/obrazy i ich miniatury do „Additional files” obiektu „Gallery”.
Powielając ten schemat można osadzić w Lectorze dowolną galerię, czy komponent zbudowany w oparciu jQuery/Prototype/MooTools na przykład:

Podobnych bibliotek pełno w sieci, wystarczy poszukać takiego rozwiązania, które odpowiada nam ze względu na wygląd i licencję.