Category Archives: Tutorial

Sempre nell’ambito dei javascript che usano la metodica non intrusiva (unobtrusive) segnalo questo script, molto utilizzato, che è giunto alla sua versione 2.0.2

Lightbox permette di visualizzare le immagini da thumbnails creando un layer che oscura lo sfondo mettendo in evidenza l’immagine stessa.
L’esempio è più significativo di molte parole.
In questa versione sono stati aggiunti anche effetti di transizione tra un’immagine ed un’altra.

Come usarlo:

Parte 1 – Setup

1. Lightbox v2.0 usa il Framework Prototype e la libreria di effetti Scriptaculous. Per includere i 3 script usa il codice sottostante.

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

2. Includi anche il CSS di Lightbox.

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

3. Controlla il CSS affinchè i file prev.gif e next.gif siano nel percorso corretto. Esegui lo stesso controllo per i file loading.gif e close.gif che sono richiamati all’inizio del file lightbox.js.

Parte 2 – Attivazione

1. Aggiungi l’attributo rel="lightbox" ad ogni link che vuoi usare con Lightbox. Per esempio:

   <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
   

   Opzionale: Usa l’attributo title se vuoi usare il caption.

2. Se hai creato un insieme di immagini relazionate fra loro aggiungi un nome di gruppo tra parentesi quadre nell’attributo rel. Per esempio:

   <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
   <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
   <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
   

   Nessun limite al numero di immagini per pagina o per gruppo!

Link:
Sito di Lightbox
Download dello script

Tra le novità dell’ultimo anno per quel che riguarda Javascript c’è sicuramente l’uso esteso della metodologia ‘non intrusiva’ (unobtrusive). Ossia basta assegnare un nome al div che contiene l’oggetto e il Javascript agirà sull’oggetto individuandolo tramite DOM.
Oggi vi propongo una galleria immagini come quella di questo esempio.

Si chiama FrogJS e si basa sulle librerie script.aculo.us e Prototype.
Per arrivare all’effetto dell’esempio basta seguire questi semplici step

1. Scarica lo zip FrogJS.zip, scompatta e fai l’upload al tuo server.

2. Nella tua pagina HTML, crea una galleria di miniature (thumbnail) con le seguenti caratteristiche. Non c’è limite alle immagini che puoi usare.

   <div id=”FrogJS”>
   <a xhref=”images/1.jpg” title=”Credit”>
   <img xsrc=”images/1_thumb.jpg” alt=”Caption” />
   </a>
   <a xhref=”images/2.jpg” title=”Credit”>
   <img xsrc=”images/2_thumb.jpg” alt=”Caption” />
   </a>
   </div>

   E’ importante che tutti i link siano all’interno del DIV il cui ID sia “FrogJS”.

3. Inserisci l’inclusione dei file frog.js, prototype.js, e scriptaculous.js nella tua pagina HTML. Sotto un esempio del codice.

   <script type=”text/javascript” xsrc=”/scripts/prototype.js”> </script>
   <script type=”text/javascript” xsrc=”/scripts/scriptaculous.js?load=effects”> </script>
   <script type=”text/javascript” xsrc=”/scripts/frog.js”> </script>

4. Ecco tutto. la galleria è pronta.

Personalizzare FrogJS

All’interno del file frog.js ci sono alcune opzioni che si possono modificare per la tua galleria. Sono situate in testa al file frog.js sotto “// CONFIGURATION VARIABLES”.

Compatibilità

FrogJS è stato testato con successo su:

• Internet Explorer 6
• Internet Explorer 7
• Firefox 2.0
• Safari 2.0
• Opera 10.1

Qualche problema con:

• Opera 10.02

Per approfondimenti si rimanda alla pagina dell’autore.