[Tutorial]Creare una Slide di Immagini

« Older   Newer »
  Share  
Zagolo
view post Posted on 7/7/2009, 19:07




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=3000



Salvate ora la pagina come volete.... chiamiamola esempio.html
esempio.html
Ora 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
 
Top
~ Sy
view post Posted on 7/7/2009, 19:22




bello molto utile!
 
Top
view post Posted on 7/7/2009, 20:11
Avatar

Web developer

Group:
I <3 Skinning!
Posts:
1,312
Location:
Milano

Status:


non va sotto ForumFree Mods ~?
 
Top
Zagolo
view post Posted on 7/7/2009, 20:27




si ma per questioni di visibilita abbiam deciso di lasciarlo qui per ora :riot:
 
Top
view post Posted on 12/7/2009, 23:13
Avatar

Bing!

Group:
Master
Posts:
6,250
Location:
Hill Valley <3

Status:


ce un modo per non renderlo automatico ma fare si che cambi solo quando si clicca sopra? un po come quello presente nella vostra tabella.
 
Top
Zagolo
view post Posted on 13/7/2009, 00:35




quella slide l'ho fatta esclusiva per il forum...
nei prossimi giorni mi mettero a creare una guida per farne una simile :fifi:
 
Top
view post Posted on 13/7/2009, 10:54
Avatar

Bing!

Group:
Master
Posts:
6,250
Location:
Hill Valley <3

Status:


a ok, lo avevo immaginato, comunque complimenti, ci vuole inventiva per creare cose cosi carine =D
 
Top
Zagolo
view post Posted on 13/7/2009, 11:42




grazie ^^
 
Top
~Toxicroak
view post Posted on 5/9/2009, 11:33




L'anteprima non funziona più
 
Top
Chuck
view post Posted on 5/9/2009, 14:41




CITAZIONE (~Toxicroak @ 5/9/2009, 12:33)
L'anteprima non funziona più

Diciamo che va, ma a modo suo :asd:
 
Top
9 replies since 7/7/2009, 19:07   660 views
  Share