Girovagando per la rete, mi sono imbattuto in questo codice per creare una veloce slideshow con il framework jQuery.
Ovviamente fare il copia e incolla non è nel mio stile quindi ho apportato qualche piccola modifica nel codice (niente di speciale, tempistiche e stile degli elementi).
Questo perché, se utilizzate direttamente il codice originale, verrà mostrato un effetto non voluto: durante la transizione delle immagini, se ne vedono due in una volta che sembra che facciano a botte tra di loro per mostrarsi (ok, fate prima a provare di persona per capire cosa intendo).
Per la cronaca, l'autore del codice originale lascia all'utilizzatore finale il compito di aggiungere tutto lo stile CSS. E così ho fatto :-)
Qui di seguito il listato della slideshow personalizzata. Iniziamo con la testata del file html (standard), dove andremo ad inglobare jQuery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Prova Slideshow</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>Proseguiamo con il cuore del codice:
<script>
$(function(){
$('.slideshow img:gt(0)').hide();
setInterval(function(){$('.slideshow :first-child').fadeOut(1500).next('img').fadeIn(1500).end().appendTo('.slideshow');}, 2400);
});
</script>
Io ho aggiunto la tempistica del fadeOut e del fadeIn (1 secondo e mezzo). Applichiamo uno stile css adeguato ai nostri scopi: slideshow centrato, sovrapposizione delle immagini per evitare effetto "litigio", eccetera:
<style type="text/css">
body {
margin:0;
padding:0;
text-align:center;
}
.slideshow {
margin:0 auto;
padding:0;
width:618px;
height:246px;
border:1px solid #eeeeee;
}
.slideshow img {
display:block;
position:absolute;
}
</style>
E finiamo in bellezza con il codice html dello slideshow (e del resto della pagina)</head> <body> <div class="slideshow"> <img src="1.jpg"/> <img src="2.jpg"/> <img src="3.jpg"/> </div> </body> </html>
14 commenti:
grazie!
Sono un pollo con l'html ma la tua slideshow è l'unica che sono riuscito a far funzionare!
grazie mille
Stefano
Perchè bisogna impostare altezza e larghezza al div con classe .slideshow ?
non dovrebbe adattarsi automaticamente alle dimensioni delle foto che gli passiamo ?
teoricamente dovrebbe essere così ma noto che in realtà quelle direttive sono necessarie...
Ciao Stefano. Sono alle prese con jQuery (sono incapace). Ho una slide nel mio blog ma sto impazzendo nel tentativo di cambiare l' effetto di transizione tra le varie immagini (la dissolvenza non mi piace vorrei un effetto come questo http://www.vanessaziletti.com/ dove le slide scorrono (per intenderci) sai qual' è il parametro da modificare nel codice???? Grazie mille. Simona
hei ciao! Come mai quando sono offline non funziona? Grazie!
da stefano a stefano!
Ciao, per farlo funzionare anche offline bisogna scaricare in locale la libreria jquery.
Per comodità infatti viene caricata direttamente da
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
E' per questo motivo che offline non funziona
:-)
@LeChatNoir
Mmm è una slideshow molto semplice non so se si riesca a fare la transizione delle immagini cambiando poco codice... però se non ti piacciono le dissolvenze prova ad eliminare il fadeIn e il fadeOut, ossia da così
setInterval(function(){$('.slideshow :first-child').fadeOut(1500).next('img').fadeIn(1500).end().appendTo('.slideshow');}, 2400);
A così:
setInterval(function(){$('.slideshow :first-child').next('img').end().appendTo('.slideshow');}, 2400);
Ciao! ^_^
Bellissimo e utilissimo!
Per caso c'è un modo per rallentare un po lo scambio delle immagini?
vorrei che rimanessero statiche per più secondi..
o altrimenti c'è anche un modo per inserire dei pulsanti in modo da rendere lo scorrimento manuale?
Grazie in anticipo! :)
Vorrei commentare anch'io.
Innanzitutto c'è un bel po' di lavoro da fare col CSS: tutte le direttive che ha imposto Stefano sono decisamente necessarie [che significa: Stefano, grazie mille!!!], in quanto servono a non far spostare ad ogni transizione tutto ciò che segue lo script, per cui width e height sono necessarie, così come il display:block; e il position:absolute; per le immagini (da me col position:relative; l'immagine in fade-in si pone sotto quella in fade-out con effetto disastroso). Io ho dovuto anche aggiungere text-align:left; alla classe slideshow perché per qualche strano motivo con Internet Explorer modalità compatibilità al div non interessava affatto che l'elemento padre si allineasse correttamente.
Infine: giocate un poco coi numeri. Il numero in fondo allo script dovrebbe, se non ho capito male, essere la durata totale dall'inizio di un fade-out all'inizio del fade-out successivo, quindi non deve essere inferiore al più grande tra il valore del fade-in e del fade-out. Quindi per avere le immagini statiche per un periodo più lungo, tenere alto il valore finale (ad esempio FadeOut da 2000, FadeIn da 1000 e valore finale da 6000 millisecondi dovrebbe tenere l'immagine fissa per 4 secondi, valore che si ottiene da 6000-2000).
Codice di esempio:
setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(1000).end().appendTo('.slideshow');}, 6000)
Ciao ottimo slider, semplice ed efficace. Volevo chiederti come mai se trasformo una immagine in un link non funziona più bene ritardando il passaggio.
Grazie
Ciao, prova a modificare il css da così:
.slideshow img
a così
.slideshow a
in questo modo le direttive css del tag "img" saranno imposte al tag "a", in teoria dovrebbe funzionare!
Ciao Stefano,
prima di tutto ti ringrazio per il codice, l'ho usato e funziona :)
Vorrei chiederti se fosse possibilie aggiungere alle immagini un link cliccando sull'immagine. Io ho provato ma non ci sono riuscito.
Mi dai una dritta? :)
Ciauz, Luigi
Hi Dear ,
I See Your Blog Daily..Your Blog Is Very Usefull For Me .I Like SO Much
You Can Also See..
Slider Maker is the easiest tool to generate jQuery Photo Slideshows - Upload jquery slideshow maker on your web server and start building your first web slideshows.
Visit Now - http://www.slider-maker.com/
Posta un commento