In questo blog mi capita spesso e volentieri di segnalare gallerie di foto e slideshow in javascript, dato che ormai con questo framework si può fare veramente di tutto. Però probabilmente per gli utenti che si trovano alle prime armi con il codice non è sempre facile utilizzarle al meglio.

Ecco perchè oggi voglio segnalarti CU3ER, un fantastico slideshow di foto in flash gratis da poter utilizzare liberamente per qualsiasi tuo progetto. Un esempio lo puoi vedere proprio nella home page del sito CU3ER.

Nel sito c’è anche un’ampia documentazione in inglese su come personalizzare lo slideshow, però dato che non tutti l’inglese lo masticano bene, voglio spiegarti come adattarlo alle tue esigenze.

Una volta scaricato i file necessari, dovrai fare alcune semplici modifiche ad alcuni di essi:

- la cartella images contenenti le foto;
- demo.htm;
- config.xml.

Cartella images

In questa cartella dovrai mettere le foto che faranno parte dello slideshow, che dovranno essere tutte della stessa dimensione. Nell’esempio le immagini sono grandi 600×300 pixel.

demo.htm

Se le foto avranno una dimensione diversa rispetto a quelle nell’esempio, dovrai modificare questa linea di codice, tra i tag head:

swfobject.embedSWF("cu3er.swf", "cu3er-container", "600", "300", "9", "expressInstall.swf", flashvars, attributes);

dove al posto di 600 e 300 dovrai mettere le dimensioni delle immagini che hai scelto per lo slideshow.

config.xml

In questo file potrai configurare a piacimento la gallery. Le parti importanti di questo file sono due: quella compresa tra i tag settings e quella compresa tra i tag slides. Dato che spiegare tutto è molto lungo, oggi vediamo come modificare la parte relativa alle slide, mentre lunedì vedremo come modificare l’altra parte.

Ogni slide è caraterizzata da queste righe di codice:

<slide>
<url>percorso_dell_immagine_.jpg</url>
<link target="_self"/>link_alla_pagina.html</link>
<description>
<link target="_self">altro_link.html</link>
<heading>Titoletto della descrizione</heading>
<paragraph>Testo per la descrizione</paragraph>
</description>
</slide>

dove l’unico tag necessario è url dove bisogna mettere l’indirizzo dell’immagine. Gli altri tag sono opzionali.

Subito dopo ogni slide, trovi il tag transition si possono impostare moltissimi parametri (è più facile provarli che spiegarli) e sono:

• num: numero di pezzettini in cui verrà spezzata l’immagine nella transizione (metti il numero che vuoi);
• slicing: direzione della rotazione che può essere horizontal o vertical (es. slicing=”vertical”);
• direction: senso di rotazione dei singoli pezzettini, che può essere up, down, left o right (es. direction=”up”);
• shader: aggiungerà un’ombra sopra l’immagine; i valori possono essere none,flat o phong (es. shader=”phong”);
• light_position: se l’attributo shader ha un valore diverso da none, potrai decidere la posizione della luce, settando x,y e z per posizionare la luce (es. light_position=”0, 0, -100″);
• cube_color: durante la transizione tra le due slide, per un istante vedrai altre facce del cubo a cui potrai cambiare il colore (es. cube_color=”0×333333″);
• z_multiplier: più è alto questo valore più  i vari pezzetti andranno in profondità (es. z_multiplier=”5″);
• duration: durata della transizione, in secondi (es. duration=”3″);
• delay: tempo di permanenza di ogni slide (es. delay=”3″).

Tutti questi parametri sono opzionali, ma se dovessimo metterli tutti, ad esempio potremmo avere:

<transition num="6" slicing="vertical" direction="up" shader="flat" light_position="0, 0, -100" cube_color="0x96ff00"  z_multiplier="4" duration="3" delay="2"/>

Come vedi hai un’ampia possibilità di personalizzazione della gallery, e tutto questo senza dover conoscere nulla di flash!

Se qualcosa non ti è chiaro chiedi pure nei commenti! E non dimenticarti di abbonarti ai feed RSS per non perderti la seconda parte dell’articolo!

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.Se non sai cosa sono, guarda questo video. Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

15 Fantastiche Gallery di Foto e Slideshow Jquery

Oggi voglio segnalarti una fantastica raccolta di gallerie fotografiche  e slideshow Jquery,  da utilizzare per i tuoi progetti, con il vantaggio di...

Slideshow Maker: Creare Slideshow Flash…Senza Flash

Appuntamento come ogni venerdì con risorse e tutorial per web designer.Oggi parliamo di Slideshow Maker, un ottimo servizio che ti permetterà di...

Tutorial jQuery – Gallery di Foto Con Effetto Zoom

Appuntamento con i tutorial su jquery, dove oggi andiamo a vedere come realizzare una galleria fotografica accativante. In particolare vedremo come...