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
-
Scarica lo zip FrogJS.zip, scompatta e fai l’upload al tuo server.
-
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”.
-
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> -
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.