immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Lightbox plugin con jQuery

di MaiNick | 1 Lug 2008 | jQuery | 8 Commenti

Logo jQuery

Inizio con un primo articolo su un plugin per jQuery alternativo alla famosissima Lightbox JS di Lokesh Dhakar.

Questo plugin, semplice e facile da usare è una creazione di Leandro Vieira Pinho, per utilizzarlo è necessario scaricare la libreria jQuery e il plugin alla pagina dedicata al progetto.

Per utilizzarlo in qualsiasi documento html inserire all’interno dei tag Head i collegamenti ai file javascript:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lightbox-0.4.js" type="text/javascript"></script>

E sempre all’interno degli stessi tag il foglio di stile del plugin:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

Non è necessario stravolgere il codice del documento html, basta richiamare la funzione con il tag scelto per contenere le immagini che avranno tale effetto:

<script type="text/javascript">
    $(function() {
        $('a[@rel*=lightbox]').lightBox(); //Seleziona tutti i link che contengono "lightbox" nel'attributo rel
	$('#gallery a').lightBox(); //Seleziona tutti i link con ID="galley"
	$('a.lightbox').lightBox(); //Seleziona tutti i link con classe "lightbox"
	$('a').lightBox(); //Seleziona tutt i link della pagina
    });
</script>

E’ possibile definire alcune configurazioni da codice alla chiamata della funzione, senza modificare alcuna riga del codice del plugin, personalizzando il tuo jQuery Lightbox plugin:

  • overlayBgColor – definisce il colore di sfondo (#000 nero di default)
  • overlayOpacity – definisce l’opacità dello sfondo (0.8 di default)
  • imageLoading – indirizzo immagine GIF di caricamento
  • imageBtnClose – indirizzo immagine GIF pulsante di chiusura
  • imageBtnPrev – indirizzo immagine GIF pulsante precedente
  • imageBtnNext – indirizzo immagine GIF pulsante successiva
  • containerBorderSize – dimensione spazio intorno all’immagine (10px padding di default)
  • containerResizeSpeed – durata dell’effetto di ridimensionamento box (400 di default)

Maggiori informazioni li troverete nel sito dell’autore dedicato al progetto.

Tags: , , ,

8 Commenti

  1. Angelo ha detto:

    Complimenti, spiegazione semplice e veloce, perfetto! Ti auguro buona fortuna per il tuo nuovo Blog! ciao a presto!

  2. MaiNickWeb ha detto:

    Grazie per il complimento. Il web è la mia passione più grande, spero di migliorare sempre di più.

  3. Nick ha detto:

    Ciao, complimenti per l’articolo!!!!
    Mi occorre un aiuto, se possibile. Ho inserito il plugin in una pagina, tutto ok, tranne per il fatto che lo z-index della gallery è troppo alto, copre le ultime voci del menù a tendina soprastante. Il problema è che non riesco a diminuire lo z-index della gallery con lightbox…. sapei come fare ?
    p.s: il menu a tendina è anche esso con jquery, perciò compatibile.

  4. MaiNickWeb ha detto:

    Ciao se ho capito bene il problema puoi risolverlo cambiando la proprietà z-index nel selettore #jquery-lightbox nel foglio di stile del plugin.
    Utilizza l’estensione Web Developer di Firefox per cambiare dal CSS il valore della proprietà fin quando ottieni il risultato atteso.

  5. Stefo ha detto:

    Ciao ho seguito le tue indicazioni ma quando vado a visualizzare non mi parte l’animazione ma mi ingrandisce l’immagine in un altra schermata e basta potresti aiutarmi? 🙁 è per un esame e sono infottato nei casini!!!

  6. Stefo ha detto:

    in piu’ ho un altro problema: imposto tutto per bene lo script ecc..poi inserisco un immagine del footer e le immagini non si aprono piu’ 🙁

Trackbacks

  1. upnews.it ha detto:

    Lightbox plugin con jQuery…

    Plugin con jQuery alternativo alla famosissima Lightbox JS…

  2. […] vedere l’immagine in una finestra modale come il plugin Lightbox presentato in un’altro articolo. Mentre facendo click su un video o audio lo riproduce con il player […]

Lascia un Commento

^ Torna su