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
A presto.