Photogallery automatica

Vi presento di seguito una photogallery automatica e responsive realizzata per necessità e rifinita per svago.
Si tratta di una classe in javascript, da modificare e personalizzare a piacimento per coloro che conoscono javascript o per chi vuole sperimentare, per chi invece non ha molta pratica è sufficiente scaricare i file che proporrò in seguito e impostare poche righe di codice.
Ecco il codice da aggiungere nella pagina in cui si vuole il clip.
Innanzitutto nella head richiamiamo photoClip.css per lo stile e photoClip.js dove è contenuta la classe Javascript che fa funzionare tutto:

<link rel="stylesheet" type="text/css" href="photoClip.css">
<script src="photoClip.js" type="text/javascript"></script>

Ora dobbiamo inizializzare la casse Javascript, per cui sempre nella head scriviamo:

<script type="text/javascript">
window.onload=function(){
        fade=new fadeImg('photoGallery',imgSet);
		fade.startAnimation();
	}
</script>

Mentre nel body impostiamo il div dentro cui Javascript si occuperà di generare i tag necessari e impostare le funzioni:

<div id="photoGallery" style="text-align:center;position:relative;">
</div>

Infine per personalizzare le foto è necessario modificare l’array imgSet nel file photoClip.js, da valorizzare con i link delle vostre foto:

imgSet=new Array(
'pictures/pictures_1.jpg',
'pictures/pictures_2.jpg',
'pictures/pictures_3.jpg',
'pictures/pictures_4.jpg'
);

Clicca per vedere un esempio in funzione

Clicca per scaricare i files.

A presto.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*