Creare uno slideshow di immagini con CSS

Per creare un semplice slideshow di immagini, cioè una serie di immagini che appaiono in sequenza sullo schermo, non sono necessarie ore di programmazione in flash, ma bastano 5 minuti di CSS e Javascript, che mantengono il sito conforme agli standard W3C e degradano in modo accettabile nei browser che non sono compatibili con javascript oppure non visualizzano le immagini.

Inseriamo il codice html seguente nella pagina:


<div id="photodiv">
<img id="photoimg" src="foto1.jpg" />
</div>


Quindi importiamo un file Javascript che contiene il seguente codice:


var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array(
"foto2.jpg",
"foto3.jpg",
"foto4.jpg",
"foto5.jpg",
"foto6.jpg",
"foto7.jpg",
"foto8.jpg",
"foto1.jpg");
var gblPauseSeconds = 4.00;
var gblFadeSeconds = 1.45;
var gblRotations = 100;

var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);

window.onload = photoShufflerLaunch;

function photoShufflerLaunch()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}

function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);
// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}

function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
// set img opacity to 100
setOpacity(theimg,100);
// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (--gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}

function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}


Nella parte iniziale del codice Javascript, nella variabile gblImg, bisogna inserire il path delle immagini che sono successive alla prima nello slideshow.
Lo slideshow termina di nuovo con la prima immagine.

Se il browser utente non dispone di Javascript, viene visualizzata soltanto la prima immagine dello slideshow.

Ulteriori dettagli su questo script si possono trovare sul sito dell'autore. Lo slideshow è rilasciato su licenza creative commons.

Tags: CSS, Grafica, Javascript, Web, Web Design
Articoli correlati:

• Due web-tools per il web design (0)
• Css e pulsanti di submit form (1)
• Box dagli angoli arrotondati con Javascript (1)
• Realizzare un crossfade con Scriptaculous (0)
• Programmi Mac per lo sviluppo web e dintorni (5)

Questo post è stato scritto Monday, May 14th, 2007 alle 9:16 pm ed è appartiene alle seguenti categorie: Web Design. Puoi seguire i commenti di questo post grazie al feed RSS 2.0. Puoi lasciare un commento, o farmi un link dal tuo sito.