Help synchronizing 2 Ultimate Fade-in slideshows

[kencl]

1) Script Title: Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I could use some help putting 2 instances of the slideshow on a single page so that 1) the "pause" is 4 seconds on each of them, and 2) there is precisely 2 seconds between the time one changes slides and the other one does.

First, I preloaded all 24 slideshow images with a simple:


var theSlides = new Array(24);
theSlides[0] = new Image; theSlides[0].src = "http://website.com/Graphics/Slideshow/slide1.jpg";
theSlides[1] = new Image; theSlides[1].src = "http://website.com/Graphics/Slideshow/slide2.jpg";
// snip
theSlides[23] = new Image; theSlides[23].src = "http://website.com/Graphics/Slideshow/slide24.jpg";


Then I wrapped the instantiation of each new fadeSlideShow object within a function so I could call the first then 2 seconds later call the second:


function Start_Slideshow_One() {
var mygallery=new fadeSlideShow({ params });
}
function Start_Slideshow_Two() {
var mygallery2=new fadeSlideShow({ params });
}

// start first slideshow then 2 seconds later start the second one
Start_Slideshow_One();
var wait2secs = setTimeout("Start_Slideshow_Two()", 2000);


That didn't work out so I guessed that maybe the instantiation process is time consuming, so I moved the 2 second delay timer into the first function wrapper so that the second function is called before the object instantiation:


function Start_Slideshow_Two() {
var mygallery2=new fadeSlideShow({ params });
}
function Start_Slideshow_One() {
var wait2secs = setTimeout("Start_Slideshow_Two()", 2000);
var mygallery=new fadeSlideShow({ params });
}
Start_Slideshow_One();


Neither of these approaches seems to work. Anyone else have any ideas (including telling me to use a different slideshow script ;0

Thanks in advance!

[jscheuer1]

You might not need to preload anything. The slide shows do that and do it incrementally which is a bit more efficient.

With so much going on, preloading or not, things just might not work out as desired all the time regardless of what you do, and regardless of the script. But it probably can be made to do so most of the time, at least for folks with decent connections to the net.

What I would suggest is perhaps preload the first image of the second show. That's negotiable depending upon how it works out. You might not even need that. If you do, it should come before all of the following code. The crucial thing though is to get the second show to start 2 seconds after the first. For that you need to call the second from the first, for example:


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
setTimeout(gal2, 2000);
}
});

function gal2(){
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
});
}

</script>

Works here. Any questions, just let me know. It would be best though, if you want more help with this, if you provide a link to the page where you are attempting this, that shows any problem you are having.