-
Problema slide con i CSS
Salve a tutti,
siccome vorrei inserire una slide con qualche immagine nel mio sito, ho cercato in internet se si poteva fare con l'html. Ho trovato il codice già pronto e l'ho inserito nel mio sito, però si vede male. Invece di stare a spiegarvi come si vede vi lascio il link dove ho caricato la slide http://davideallegri.altervista.org/...0-%20Copia.htm
Mi sapete dire cosa manca o dove è sbagliato? Grazie a chi mi sarà d'aiuto.
Qui sotto vi lascio il codice
- codice inserito nella pagina:
Codice HTML:
<div id="photodiv">
<img id="photoimg" src="Animali/slides/acquario.jpg" />
</div>
- codice inserito nel foglio di Javascript:
Codice HTML:
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array(
"Animali/slides/acquario.jpg",
"Animali/slides/coccodrillo.jpg",
"Animali/slides/coccodrillo2.jpg",
"Animali/slides/lemure4.jpg",
"Animali/slides/lemure3.jpg",
"Animali/slides/pesce.jpg",
"Animali/slides/lucertola3.jpg",
"Animali/slides/lemure5.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;
}
Grazie
Davide
-
Salve Davide
ho visitato il tuo sito e siccome sarei interessato a inerire delle slide nella mia pagina web volevo sapere come poter procedere. Ho notato che hai usato Slideshow Maker, così mi sono creato un esempio con alcune foto, ma qui mi sono fermato perchè non riesco a capire come fare a inserire file slideshow.swf nella cartella del sito. Potresti darmi una dritta?
Grazie infinite