Javascript: Lightbox 2 con jQuery senza Prototype
Webmaster — Scritto da Michele Di Salvatore (Michele) il 5 giugno 2009 alle 18:00
Chi non è del settore dal titolo sembra che stia parlando un’altra lingua, in realtà sto parlando del famoso script Lightbox 2 che dà un effetto particolare ai link che fanno riferimento alle immagini, infatti anzicché aprire una nuova pagina contenente semplicemente il file immagine, dona un effetto molto simpatico, come quello raffigurato nell’immagine in testa a quest’articolo.
Molti di voi conoscono la versione Lightbox 2 per Prototype, una nota libreria javascript che facilita il lavoro di molti webmaster, ma ne esiste una copia identica per un’altra libreria Javascript, jQuery.
Per chi nel proprio sito integra già jQuery (più comoda da usare) è superfluo incrementare anche Prototype, quindi ecco la soluzione per utilizzare l’effetto Lightbox 2 con jQuery.
Innanzitutto è necessario scaricare lo script dalla fonte ufficiale, cioè Google Code. Fatto ciò non vi resta che seguire le seguenti istruzioni:
- carica la directory sul server in una cartella ben definita;
- inserire nel tag <head> il seguente codice :
<link rel=”stylesheet” href=”DIRECTORY_DEL_FILE/lightbox.css” type=”text/css” media=”screen” />
<script type=”text/javascript” language=”javascript” src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript” src=”DIRECTORY_DEL_FILE/jquery.lightbox.js”></script>
<script>
$(document).ready(function(){
base_url = document.location.href.substring(0, document.location.href.indexOf(‘index.html’), 0);
$(“.lightbox”).lightbox({
fitToScreen: true,
imageClickClose: false
});
});
</script>
- modificare il percorso delle immagini che fanno riferimento alla cartella images in lightbox.css (nella directory css) e nel file jquery.lightbox.js (nella directory principale);
- come ultima passaggio è necessario modificare tutti i link che fanno riferimento alle immagini aggiungendo il tag rel=”lightbox” come in questo esempio:
<a herf=”http://www.dylanblog.com/wp-content/uploads/2009/06/lightbox2-jquery-400×277.png” rel=lightbox”><img src=”http://www.dylanblog.com/wp-content/uploads/2009/06/lightbox2-jquery-400×277.png”></a>
Ora lo script è pronto per essere utilizzato e, salvo conflitti con altri script, dovrebbe funzionare correttamente.
Tags: javascript, jquery
Autore: Michele Di Salvatore (Michele)
Michele Di Salvatore è amministratore e fondatore di DylanBlog.com. Oltre a ciò è autore di diversi articoli su questo e diversi altri blog, per cui ha collaborato per breve tempo. Attualmente è studente di Ingegneria delle Telecomunicazioni a tempo pieno presso il Politecnico di Milano e nel poco tempo libero si occupa di sviluppo web e blogging.
Qualcos'altro di interessante da leggere:
Messaggi pop-up in javascript attraverso jGrowl
Ecco quella che ritengo un’ ottima plugin per jQuery: jGrowl permette di notificare all’ utente informazioni attraverso un’ interfaccia assolutamento non intrusiva e con solo una riga di codice….
