SLIDER FOTO PERSONALIZZABILE - english version here

Guida per l'installazione:

1. Copia il seguente codice: <script> /*_______ROTATOR___________________________________*/ var currentrot=1; var sucrot=2; var rottime1; var rottime2; var rotcounter=0; var quante=4; /* modificare questo valore per il numero di immagini */ function rotator(x){ if(x==0){ var im; var i; for(i=1;i<quante+1;i++){ im=document.createElement("img"); im.setAttribute('id', 'sel'+i); if(i==1) im.setAttribute('src', 'slider/selector2.png'); else im.setAttribute('src', 'slider/selector1.png'); im.setAttribute('width', 15); im.setAttribute('onmousedown', 'manualchange('+i+');'); document.getElementById('selectors').appendChild(im); } } rottime1=setTimeout(function(){ change(); }, 1500); } function change(){ rottime2=setInterval(function(){ opacize(); }, 50); } function opacize(){ if(rotcounter!=10){ document.getElementById("rot2").style.opacity=document.getElementById("rot2").style.opacity-(-0.1); rotcounter++; } else{ document.getElementById("sel"+currentrot).src="slider/selector1.png"; document.getElementById("sel"+sucrot).src="slider/selector2.png"; clearInterval(rottime2); rotcounter=0; currentrot++; sucrot++; if(currentrot==quante+1) currentrot=1; if(sucrot==quante+1) sucrot=1; document.getElementById("rot1").src="slider/slider"+currentrot+".jpg"; document.getElementById("rot2").src="slider/slider"+sucrot+".jpg"; document.getElementById("rot2").style.opacity=0; rotator(1); } } function manualchange(x){ clearTimeout(rottime1); clearInterval(rottime2); document.getElementById("sel"+x).src="slider/selector2.png"; for(var j=1;j<quante+1;j++) if(j!=x) document.getElementById("sel"+j).src="slider/selector1.png"; currentrot=x; sucrot=x+1; if(sucrot==quante+1) sucrot=1; rotcounter=0; document.getElementById("rot1").src="slider/slider"+currentrot+".jpg"; document.getElementById("rot2").src="slider/slider"+sucrot+".jpg"; document.getElementById("rot2").style.opacity=0; rotator(); } </script> <style> .selectors{ position:absolute; padding-top:10px; margin-left:1%; } .selectors img{ cursor: pointer; margin-right: 1px; } </style>

2. Incolla il codice nella tua pagina .html, dopo il tag head e prima del tag di chiusura /head (lo trovi all'inizio della pagina), come nell'esempio (non ha importanza in che punto venga incollato, basta che sia all'interno dell'area "head" - in questo esempio viene casualmente inserito dopo il tag "title"):

3. Copia questa breve porzione di codice: onload="rotator(0);"
Ora inseriscila nel tag body in questo modo:

4. Copia il seguente codice:
<div class="rotator" style="height:200px;"> <img id="rot1" src="slider/slider1.jpg" style="position: absolute;" width="620" height="200"/> <img id="rot2" src="slider/slider2.jpg" style="position: absolute; opacity:0; filter:alpha(opacity=0);" width="620" height="200"/> <div class="selectors" id="selectors"></div> </div>

5. Incolla il codice nella tua pagina .html, nel punto esatto in cui vuoi che compaia lo slider. Ovviamente dovrà trovarsi da qualche parte all'interno dei tag body e /body.

6. Scarica questo file .zip che contiene le immagini che servono per far funzionare lo slider. Una volta scaricato estrai l'archivio nella cartella in cui si trova la tua pagina .html.
Esempio (in questo esempio la pagina .html si chiama "index"):


Se hai svolto tutto correttamente lo slider dovrebbe funzionare con le immagini di default.

7. Adesso puoi personalizzare lo slider:

- crea le tue immagini (di dimensioni tutte uguali) e inseriscile nella cartella "slider" rinominandole "slider1, slider2, slider3, ecc...". Elimina prima le immagini di default;

- puoi cambiare il numero di immagini dello slider modificando "var quante=4" nel primo codice che ti ho fatto incollare;

- puoi cambiare le dimensioni dello slider modificando i campi "width" ed "height" nel secondo codice che ti ho fatto incollare.