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.