FrogJS – Galleria immagini in JavaScript

Spluciando un po’ nel web ho trovato questa galleria immagini, FrogJS, in JavaScript molto interessante.

Eccole le procedure da fare nella pagina HTML.

Crea una galleria di miniature (thumbnail) con le seguenti caratteristiche.

<div id="FrogJS">
<a xhref="images/1.jpg" mce_href="images/1.jpg" title="Credit">
<img xsrc="images/1_thumb.jpg" mce_src="images/1_thumb.jpg" alt="Caption" />
</a>
<a xhref="images/2.jpg" mce_href="images/2.jpg" title="Credit">
<img xsrc="images/2_thumb.jpg" mce_src="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 e i files sources della galleria.

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

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

Per quanto riguarda la compatibilità FrogJS è stato testato con successo su:

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

🙂Scarica la galleria FrogJS
🙂Vai al sito dell’autore

Annunci

3 thoughts on “FrogJS – Galleria immagini in JavaScript

Rispondi

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...