V súčasnosti sa rozšíril pojem Web 2.0, ktorý naznačuje modernizáciu web stránok a ich interaktivitu. Dnes spravíme interaktívne zobrazovanie obrázkov pomocou knižnice jQuery, ktoré vidieť na všetkých moderných stránkach. Lightbox a Lightbox 2 sú Javascript aplikácie, ktoré zobrazia obrázok v modálnom dialógu.

lightbox

Ako spraviť Lightbox

Najprv si stiahnime samotný plugin pre jQuery z adresy http://leandrovieira.com/download/7/. ZIP súbor obsahuje css štýl, obrázky a samotný JavaScript plugin a jQuery. Náš projekt by mal obsahovať adresáre css, images a js.
HTML stránka by mala obsahovať nasledujúce riadky v hlavičke:

<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/jquery.lightbox-0.5.js” type=”text/javascript”></script>
<script type=”text/javascript”>

$(function() {
$(‘a.lightbox’).lightBox();
});

</script>

Pomocou selektora a.lightbox sa nájdu všetky odkazy s class atribútom lightbox, na ktorých sa použije samotná funkcia. Samotný obrázok, ktorý chceme zobraziť pomocou Lightboxu by v HTML stránke mal vyzerať:

<a class=”lightbox” href=”cesta/obrazok.jpg”>
<img src=”cesta/miniatura_obrazka.jpg” alt=”obrazok” />
</a>

Nálepky: jquery