jQuery

Lightbox plugin con jQuery

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:

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

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

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.

You might also like

  • Lightbox plugin con jQuery…

    Plugin con jQuery alternativo alla famosissima Lightbox JS…

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

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

    1 luglio 2008
  • […] 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 […]

    1 luglio 2008
  • Nick

    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.

    1 luglio 2008
  • 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.

    1 luglio 2008
  • Stefo

    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!!!

    1 luglio 2008
  • Stefo

    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’ 🙁

    1 luglio 2008

LEAVE A REPLY