mercoledì 3 ottobre 2007

Mostrate le immagini con Lightbox

Oggi, con la mente sgombra, vi consiglio uno script utilissimo per mostrare le immagini in un sito. Volete che cliccando su una immagine piccola, questa si apra magicamente al centro con tanto di resize dinamico e oscuri tutto il resto della pagina web? Niente di più semplice con Lightbox2, veramente un ottimo progetto Javascript da includere nelle pagine web che necessitano dei suoi servigi...

Vengono mostrate le immagini un po' come se fossero delle Polaroid :-D
L'integrazione con le nostre pagine è molto semplice:
  • scaricate il pacchetto lightbox2.zip dalla pagina Web ufficiale
  • decompattatelo nella cartella del vostro sito (mettete i permessi giusti!)
  • includete i tre file javascript necessari al funzionamento
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
  • ora includete il foglio di stile di lightbox:
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
    
  • adesso non rimane altro che dire al browser come aprire il link all'immagine. Ogni volta che volete aprire una immagine mettete rel="lightbox" nel link:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    
Chiaramente al posto di image #1 ci andrà il codice dell'immagine, <img src="..." /> eccetera! :-)

2 commenti:

Marco Fabbri ha detto...

Se ti piace lightBox, allora il plugin jQuery lightBox e' consigliatissimo! (jQuery e' "insindacabilmente" eccezionale...)

Skylight Contractors Rochester Hills ha detto...

This iss awesome