Come creare una semplice SlideShow HTML CSS jQUERY
Nel WEB troverete molte bellissime Slide preconfezionate (alcune a pagamento altre gratuite) , ma se volete cimentarvi a crearne una vostra (una semplice..) questa guida vuole aiutarvi a capire come fare.
In HTML definiremo la struttura , con i CSS personalizzeremo l'aspetto grafico ed useremo jQuery per gestire le animazioni della slide.
Iniziamo a definire la struttura HTML , creiamo un DIV con un ID ed al suo interno inseriamo due TAG IMG con ID ed un TAG P per il testo. (da notare che non c'e' bisogno di definire il SRC delle immagini in quanto verra' assegnato dinamicamente dallo script)
Codice HTML:
<div id="slide">
<img id="foto1" src="" />
<img id="foto2" src="" />
<p></p>
</div>
Quindi scriviamo il nostro CSS , come potrete vedere ci sono alcuni parametri che non si possono modificare perche' sono essenziali al funzionamento corretto di questo esempio ; per tutto il resto potete personalizzare come volete.
Codice:
<style>
#slide{
/* parametro obbligatorio */
overflow:hidden;
/* qui potete personalizzare la dimensione , la posizione e l'aspetto */
width:300px;height:300px;
position:relative;
top:20px;left:20px;
background:white;
box-shadow:0px 0px 5px black;
}
#slide p{
/* qui potete personalizzare il testo */
font-family:Arial, sans-serif;
font-size:150%;
text-align:center;
position:relative;
width:200px;height:40px;
top:200px;left:40px;
padding:10px;
background:rgba(20,20,20,0.5);
color:white;
/* parametro obbligatorio */
opacity:0;
}
/* gli stili definiti qui di seguito non devono essere modificati ! */
#slide img{
width:100%;height:100%;
position:absolute;
top:0px;left:0px;
}
#slide:hover p{
opacity:1;
}
</style>
Ora passiamo allo Script , come prima cosa caricheremo la libreria jQuery , quindi ho creato 4 funzioni :
1) SLIDESHOW la funzione principale
2) CAMBIASLIDE la funzione che si occupa delle animazioni
3) FOTOGRAFIE la funzione che definisce le foto che si useranno nella slide
4) SCRITTE la funzione che definisce i testi in sovraimpressione alle foto
Al caricamento del documento eseguiremo la funzione principale , la quale richiede come argomenti: il numero totale di foto che volete usare , il tempo di transizione ms (quidi il tempo dell'animazione) , il tempo di intervallo ms (quindi il tempo che intercorre tra un immagine e l'altra). (MS sta per MilliSecondi)
Codice:
$(document).ready(function(){
slideshow(5,1000,5000);
});
Quindi andiamo a vedere in dettaglio le nostre funzioni..
(1) SLIDESHOW
come prima cosa inizializzo le variabili e gli elementi ; le variabili saranno:
N = il numero totale di foto , T1 e T2 = i tempi di transizione e intervallo , X = l'indice della foto che si vuole visualizzare , TXT = l'indice del testo che si vuole visualizzare , STATO = la posizione dell'animazione
in sostanza avendo due IMG , una sara' quella visualizzata l'altra sara' la successiva ; quindi lo stato mi indica quale delle due IMG e' la successiva.
useremo la funzione ANIMATE di jQuery per tutte le animazioni (usero' principalmente lo scorimmento da destra verso sinistra, ecco perche' nel CSS abbiamo definito lo Slide con overflow hidden in questo modo possiamo nascondere l'immagine successiva tenendola a left 100%); un'altra cosa importante che useremo e ATTR che definisce gli attributi di un elemento , nel nostro caso il SRC del IMG.
Codice:
/* Argomenti funzione:
n -> il numero totale di foto
t1 -> il tempo in millisecondi di transizione
t2 -> il tempo in millisecondi di intervallo
*/
function slideshow(n,t1,t2){
/* inizializzo le variabili e gli elementi */
var x = 0;
var txt = 0;
var stato = 1;
$("#foto2").animate({"opacity":"0"},0);
$("#foto2").animate({"left":"100%"},0);
$("#foto2").animate({"opacity":"1"},0);
$("#foto1").attr("src",fotografie(x,n));
$("#slide p").html(scritte(txt,n));
x++;
$("#foto2").attr("src",fotografie(x,n));
/* eseguo l'intervallo dello slide */
var intervallo = setInterval(function(){
x++;txt++;
if(x>n-1){x=0;}
if(txt>n-1){txt=0;}
stato = cambiaSlide(x,n,stato,t1,txt);
},t2);
}
(2) CAMBIASLIDE
questa funzione verra' eseguita dalla principale ogni volta che si vorra' eseguire lo slide dell'immagine
come prima cosa imposteremo in base allo Stato quale e' l'elemento IMG visualizzato e quale da visualizzare
quindi eseguiremo l'animazione ed usando i CALLBACK riposizioneremo l'elemento transitato nella posizione di partenza per la prossima slide.
Quindi restituiremo la modifica della variabile Stato
Codice:
/* Argomenti funzione:
x -> la foto che si sta visualizzando
n -> il numero totale di foto
stato -> la posizione dello slide
t -> il tempo in millisecondi di transizione
txt -> il testo che si sta visualizzando
*/
function cambiaSlide(x,n,stato,t,txt){
if(stato==1){
var elemento1 = "#foto1";
var elemento2 = "#foto2";
}else{
var elemento1 = "#foto2";
var elemento2 = "#foto1";
}
$(elemento2).animate({"left":"0px"},t);
$(elemento1).animate({"left":"-100%"},t,function(){
$("#slide p").html(scritte(txt,n));
$(elemento1).animate({"opacity":"0"},0);
$(elemento1).animate({"left":"100%"},0);
$(elemento1).animate({"opacity":"1"},0,function(){
$(elemento1).attr("src",fotografie(x,n));
});
});
if(stato==1){stato=0;}else{stato=1;}
return stato;
}
(3) FOTOGRAFIE
(4) SCRITTE
sono due funzioni hanno stessa identica struttura , una definisce il percorso delle foto che useremo e l'altra i testi che apparriranno quando con il mouse passeremo sopra l'immagine.
Ogni funzione usa un ARRAY per contenere le informazioni , da notare che nel caso le nostre foto ed i nostri testi fossero contenuti in un DB queste funzioni dovrebbero essere modificate in modo da prelevare in automatico i dati che ci servono con un file PHP ... magari nella prossima guida.
Codice:
/*
Argomenti funzione:
x -> la foto che si sta visualizzando
n -> il numero totale di foto
*/
function fotografie(x,n){
var foto = new Array(n);
/* scrivere il path ed il nome delle foto che volere usare */
foto[0] = "foto/1.jpg";
foto[1] = "foto/2.jpg";
foto[2] = "foto/3.jpg";
foto[3] = "foto/4.jpg";
foto[4] = "foto/5.jpg";
return foto[x];
}
/*
Argomenti funzione:
x -> la foto che si sta visualizzando
n -> il numero totale di foto
*/
function scritte(x,n){
var testi = new Array(n);
/* scrivere il testo che vuoi far apparire sulle foto */
testi[0] = "testo1";
testi[1] = "testo2";
testi[2] = "testo3";
testi[3] = "testo4";
testi[4] = "testo5";
return testi[x];
}
Fine! Ecco il DEMO di questa guida.
Vi raccomando di avere immagini tutte con la stessa dimensione !
NLSweb
