Zagolo |
|
| Come creare una slide >> Esempio << Per creare una slide copiate questo all'interno del body di una pagina html: CODICE <script type="text/javascript">
var slidezag=new Array()
//slidezag[x]=['link all immagine', 'link per l immagine', '_blank']
slidezag[0]=['link all immagine', 'link che volete che abbia l immagine', '_blank'] slidezag[1]=['link all immagine', 'link che volete che abbia l immagine', '_blank'] slidezag[2]=['link all immagine', 'link che volete che abbia l immagine', '_blank']
//qui sotto avete le variabili per la grandezza della slide
var slidewidth="100px" //larghezza var slideheight="100px" //altezza var slidecycles="continous" //numero di cicli prima che si stoppi (con continous non si stoppa mai) var randomorder="no" //le immagini vengono visualizzate in modo casuali var preloadimages="yes" //preload? risposte "yes" or "no" var slidebgcolor='white'
//qui sotto vedete i secondi che ci vogliono prima che l immagine cambi(in millisecondi) var slidedelay=3000
////la parte qui sotto lasciatela così com'e////////////////
var ie=document.all var dom=document.getElementById var curcycle=0
if (preloadimages=="yes"){ for (i=0;i<slidezag.length;i++){ var cacheimage=new Image() cacheimage.src=slidezag[i][0] } }
var currentslide=0
function randomize(targetarray){ slidezagCopy=new Array() var the_one var z=0 while (z<targetarray.length){ the_one=Math.floor(Math.random()*targetarray.length) if (targetarray[the_one]!="_selected!"){ slidezagCopy[z]=targetarray[the_one] targetarray[the_one]="_selected!" z++ } } }
if (randomorder=="yes") randomize(slidezag) else slidezagCopy=slidezag
function rotateimages(){ curcycle=(currentslide==0)? curcycle+1 : curcycle ultcontainer='<center>' if (slidezagCopy[currentslide][1]!="") ultcontainer+='<a href="'+slidezagCopy[currentslide][1]+'" target="'+slidezagCopy[currentslide][2]+'">' ultcontainer+='<img src="'+slidezagCopy[currentslide][0]+'" border="0">' if (slidezagCopy[currentslide][1]!="") ultcontainer+='</a>' ultcontainer+='</center>' if (ie||dom) crossrotateobj.innerHTML=ultcontainer if (currentslide==slidezag.length-1) currentslide=0 else currentslide++ if (curcycle==parseInt(slidecycles) && currentslide==0) return setTimeout("rotateimages()",slidedelay) }
if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom rotateimages() }
if (ie||dom) window.onload=start_slider
</script> Aggiungete qui il link dell immagine e il link che volete che abbia slidezag[0]=['link all immagine', 'link che volete che abbia l immagine', '_blank'] slidezag[1]=['link all immagine', 'link che volete che abbia l immagine', '_blank'] slidezag[2]=['link all immagine', 'link che volete che abbia l immagine', '_blank'] potete anche aggiungere altre immagini in questo modo slidezag[3]=['link all immagine', 'link che volete che abbia l immagine', '_blank']etc. Modificate ora queste opzioni a vostro gradimento //qui sotto avete le variabili per la grandezza della slide var slidewidth="100px" //larghezza var slideheight="100px" //altezza var slidecycles="continous" //numero di cicli prima che si stoppi (con continous non si stoppa mai) var randomorder="no" //le immagini vengono visualizzate in modo casuali var preloadimages="yes" //preload? risposte "yes" or "no" //qui sotto vedete i secondi che ci vogliono prima che l immagine cambi(in millisecondi) var slidedelay=3000Salvate ora la pagina come volete.... chiamiamola esempio.html esempio.htmlOra dovremo aggiungerla nel nostro forum quindi: Entrate nel css della pagina e create un id io lo chiamero slide. CODICE #slide {width: largheza slide in px; height: altezza slide in px; border: 0; overflow:hidden} Ora create nell html un iframe nel punto in cui volete la slide in questo modo: CODICE <iframe src = "link di esempio.html" id = "slide"></iframe> Edited by Zagolo - 7/7/2009, 23:07
|
| |