Menu
Hi,
I’ve been away from the forums for a while as I’m not doing too much web design right now. I’m building a site for my wife and I incorporated a slideshow script from a few years back. The problem is, it most likely pre-dates Firefox and Opera 9.23 (Mac). The slideshow is set to automatically run onLoad. It works beautifully in IE (Windows) and Safari. It worked fine in Firefox until I posted the file to the server – it doesn’t seem to want to run from the Linux-based remote server.
Here’s a link to the page »» [URL=”http://www.nancystalbow.com/coming_soon_new_script.html”]http://www.nancystalbow.com/coming_soon_new_script.html
Here’s the script »»
Code:
[CODE]
<script language=”JavaScript” type=”text/javascript”>
<!– Original: CodeLifter.com ([email protected]) –>
<!– Web Site: http://www.codelifter.com –>
<!– This script and many more are available free online at –>
<!– The JavaScript Source!! http://javascript.internet.com –>
<!– This is a MODIFIED VERSION (with due respect to the author) –>
<!– Made it Object-Oriented to run multiple slideshows –>
<!– Begin
function SlideShow(imgName,speed,duration){
var p; //length of Pic array
var j = 0;
var slide = imgName;
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = speed;
// Duration of crossfade (seconds)
var crossFadeDuration = duration;
var Pic = new Array();
this.timer = null;
this.setPics = function(){
var preLoad = new Array();
//set pics and preload
for (var i=0;i<arguments.length;i++){
Pic[i] = arguments[i];
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
p = Pic.length;
}
this.runSlideShow = function(varName){
var t;
if (document.all) {
document.images[slide].style.filter=”blendTrans(duration=3)”;
document.images[slide].style.filter=”blendTrans(duration=crossFadeDuration)”;
document.images[slide].filters.blendTrans.Apply();
}
document.images[slide].src = Pic[j];
if (document.all) {
document.images[slide].filters.blendTrans.Play();
}
j = j + 1;
if (j > (p – 1)) j = 0;
this.timer = setTimeout(varName+”.runSlideShow(‘”+varName+”‘)”, slideShowSpeed);
}
this.stopSlideShow = function(){
if (this.timer) clearTimeout(this.timer);
}
}
//end script
//sample usage
var slide1 = new SlideShow(‘SlideShow1’,2800,90);
slide1.setPics(“slides/balloons.jpg”,”slides/bvm.jpg”,”slides/cake&flowers.jpg”,”slides/caribbean_market.jpg”,”slides/chicken.jpg”,”slides/christmas_squares.jpg”,”slides/partridge_pear_tree.jpg”,”slides/hannukah.jpg”,”slides/crow.jpg”,”slides/mexican_angels.jpg”,”slides/feliz.jpg”,”slides/latkes.jpg”,”slides/matruschka.jpg”,”slides/ornaments.jpg”,”slides/christmas_mice.jpg”,”slides/nativity.jpg”,”slides/pud.jpg”,”slides/pinatas.jpg”,”slides/pullover.jpg”,”slides/thanksgiving.jpg”,”slides/season.jpg”,”slides/red_ornaments.jpg”,”slides/trees.jpg”,”slides/we_wish_u.jpg”,”slides/still_life.jpg”,”slides/sleigh_bells.jpg”,”slides/angel.jpg”);
//if you want to start slideshows onload
/*window.onload = function(){
slide1.runSlideShow(‘slide1’);
}*/
// End –>
</script>
[INDENT]</head>
<body onload=”slide1.runSlideShow(‘slide1’)” class=”c3″>
<div id=”pic1″><img name=”SlideShow1″ src=”slides/balloons.jpg” width=”136″ height=”110″ alt=”slideshow loading” id=”SlideShow1″></div>[/INDENT]
All help and any comments or suggestions greatly appreciated. My strengths are in layout and CSS – I’m strictly copy/paste plus a little fudging here and there when it comes to javaScript!! ?
Thanks,
robsta