Daily Archives: 5 Febbraio, 2007

FrogJS: galleria immagini con Javascript

Pubblicato da

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.