Ultimate Fade-in slideshow Replacing one slideshow with another

[DynamicCoder]

Ultimate Fade-in slideshow
http://www.dynamicdrive.com/dynamici...nslideshow.htm


Is it possible with an onclick event to replace one slideshow with another?

Defining two slideshows:
var fadeimages1=new Array()
fadeimages1[0]=["Images/400/12170013.jpg", "", ""]
fadeimages1[1]=["Images/400/12170011.jpg", "", ""]

var fadeimages2=new Array()
fadeimages2[0]=["Images/400/37070001.jpg", "", ""]
fadeimages2[1]=["Images/400/37070002.jpg", "", ""]

With slideshow using first slideshow:
<div id="fadearea" class="centerdiv">
<script type="text/javascript">
new fadeshow(fadeimages1, 400, 400, 0, 2500, 0, "")
</script>
</div>

Calling function to replace slideshow1 with slideshow2 from:
<img border="0" onclick="ChangeFader(fadeimages2)" src="Images/tn/tn001.jpg">

Function to change slideshows
<script type="text/javascript">
ChangeFader(name)
{
this.theimages=name
}
</script>

Where "this" would need to reference the existing slideshow in order to replace it?

Any ideas on how to call the first slideshow and replace it?

[jscheuer1]

Each slide show on the page is assigned a number by the script so that it can keep track of it. If you have only one, the number is 0. The below links and script, if placed after the other parts of the script and markup will do the deed. 0 is the number of the show, fadeimages2 is the new array of images to use. The , 1 may be skipped. With it, random order is used, without, the order of the images in the array(s) as written is preserved.

<a href="javascript:changeArray(0, fadeimages2, 1)">change images</a>
<a href="javascript:changeArray(0, fadeimages, 1)">change back</a>
<script type="text/javascript">
function changeArray(num, arrayName, displayorder){
fadearray[num].theimages=arrayName
if (typeof displayorder!="undefined")
fadearray[num].theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
fadearray[num].postimages.length=0
for (p=0;p<fadearray[num].theimages.length;p++){
fadearray[num].postimages[p]=new Image()
fadearray[num].postimages[p].src=fadearray[num].theimages[p][0]
}
var crossobj=iebrowser? iebrowser[fadearray[num].curcanvas] : document.getElementById(fadearray[num].curcanvas)
fadearray[num].curimageindex=0
fadearray[num].nextimageindex=1
fadearray[num].populateslide(crossobj, fadearray[num].curimageindex)
}
</script>

[DynamicCoder]

Thanks! That did the trick

[badtant]

jscheuer1:

this doen't seem to work properly when the two arrays doen't have the same length. can it easaly be changed so that different lenghts does work?

thanks!

[jscheuer1]

jscheuer1:

this doen't seem to work properly when the two arrays doen't have the same length. can it easaly be changed so that different lenghts does work?

thanks!

What seems to be the problem? What happens when you switch to a new array of a different length? It works here on different length arrays. Perhaps your new array of a different length has a syntax error.

[badtant]

hmm, strange. i'm using ajax to update my array and i guess there are leftovers that needs to be cleared before i fill it up again.

how do i do that easy? maybe like this?

arrayname=null;
arrayname=new Array();

[jscheuer1]

hmm, strange. i'm using ajax to update my array and i guess there are leftovers that needs to be cleared before i fill it up again.

how do i do that easy? maybe like this?

arrayname=null;
arrayname=new Array();

Hmm, so are you even using the code I posted in this thread or not? In any case, you are right, the old array needs to be removed from the 'stack' (not sure if I have the right technical name for this in javascript) first. Since (in the original script) the script created preload array of images is the one that the script uses to determine the length of the slideshow, here is where I zero it out and replace it:

fadearray[num].postimages.length=0
for (p=0;p<fadearray[num].theimages.length;p++){
fadearray[num].postimages[p]=new Image()
fadearray[num].postimages[p].src=fadearray[num].theimages[p][0]
}

That is after I have replaced the original base array itself here:

fadearray[num].theimages=arrayName

One crucial part of this entire process is that since the original script is object oriented, we need to first determine which of the script's objects our particular slideshow is. These are stored by the original script in the script created array named fadearray in the order in which they where initialized by the script to begin with, starting with fadearray[0].

[badtant]

managed to fix it, thanks alot!!

now to another problem. when only having one image in the array there is a fix here:
http://www.dynamicdrive.com/forums/s...ead.php?t=7942

my question is now: how to i change the changeArray function to also work with this fix?
fadearray[num].nextimageindex=1 should be changed to what?

thanks!

[jscheuer1]

fadearray[num].nextimageindex=fadearray[num].theimages.length>1?1:0;

[badtant]

thank you very much =)