CUSTOMIZABLE IMAGE SLIDESHOW - versione in italiano

Setting up the slider:

1. Copy the following code: <script> /*_______ROTATOR___________________________________*/ var currentrot=1; var sucrot=2; var rottime1; var rottime2; var rotcounter=0; var howmany=4; /* modificare questo valore per il numero di immagini */ function rotator(x){ if(x==0){ var im; var i; for(i=1;i<howmany+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==howmany+1) currentrot=1; if(sucrot==howmany+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<howmany+1;j++) if(j!=x) document.getElementById("sel"+j).src="slider/selector1.png"; currentrot=x; sucrot=x+1; if(sucrot==howmany+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. Paste the code in your .html page, after the "head" tag and before the closing tag "/head" (at the top of the page), as in this example (it's not important where you put the code, only matters that it's inside the "head" tag - in this exaple it is casually after the "title" tag):

3. Copy this short code: onload="rotator(0);"
Insert it in the "body" tag like this:

4. Copy the following code:
<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. Paste it into you .html page, at the exact point you want the slider to appear. Obviously between the body and /body tags.

6. Download this .zip file containing images to make the slider work. Once downloaded just unzip it in the folder where your .html page is placed.
Example:


If you did all the steps correctly it should now work with deafult images.

7. You can now customize your slider:

- creat your images (all equal in dimensions) and insert them into the "slider" folder you downloaded, renaming them: "slider1, slider2, slider3, etc...". You can delete default images;

- you can modify the number of the images changing "var howmany=4" in the first code you pasted;

- you can change image dimensions by changing "width" and "height" parameters in the second code you pasted.