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>
1 commenti:
grazie!
Posta un commento