Ultimate Fade-in slideshow (v1.5) : change images

[gnuisnotunix]

Script : Ultimate Fade-in slideshow (v1.5)
http://www.dynamicdrive.com/dynamici...nslideshow.htm

Hi,

Is it possible to change the pictures that are showed in the slideshow by clicking on links in the same website?

thanks for your help!

Daniel

[jscheuer1]

Do you mean links on the same page? If you want different slideshows from different pages on the website, link them to different slideshows.

[gnuisnotunix]

oops, I'm sorry.. I mean on the same page..

[jscheuer1]

OK, that's what I thought you might mean, it is a little complicated, but can be done.

First consider that each time you make a slideshow on a page using this script, it gets assigned a number. The first one gets 0, the next one 1 and so on. We need to use this number to access a slideshow to change it. Even if you only have one, its number will be 0 and we will need to use it.

Second, the images are originally set in an array. To replace them we need another array already defined to substitute for that original array. Examples of image arrays (two are shown):

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

Those are the main concepts. Define your alternate array(s) of images at the beginning of the script along with the other array(s) of images there. Put this function at the end of the main script:

function changeArray(num, arrayName){
fadearray[num].theimages=arrayName
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]
}
}

Now, to construct a link to change a slideshow, use:

<a href="javascript:changeArray(0, fadeimages3)">change images</a>

where 0 is set to the number of the slideshow that you want to change and fadeimages3 is the name of the new array of images you want to change to.

[gnuisnotunix]

Thanky you very much for your help! It works

After clicking the link, it takes some time for the images to be showed.. I think I will try to include a "Loading..." image or something like that...

Daniel

[jscheuer1]

I noticed that while working on this but thought it wouldn't really matter much. Now I'm thinking that for some things it might. I also thought that randomness might want to be reintroduced or added with the change of image arrays. This will speed up the transition so that the next image that shows will be from the new array, I've only done limited testing but, have already squashed the only bug that cropped up. Substitute this for my previous 'changeArray' function:

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)
}

The syntax for the link to change the images remains the same except that it now has the optional "R" parameter also, examples -

as before:

<a href="javascript:changeArray(0, fadeimages3)">change images</a>

or with the new optional "R" parameter:

<a href="javascript:changeArray(0, fadeimages3, "R")">change images</a>

[gnuisnotunix]

Thanks!

It is working better now but I would prefer the image to be immediatly replaced for the first image of the new array, is there any easy way to do it?
I wanted the slideshow to start when one of the links are clicked. I deleted the "background-color: " from the "style" attribute of the div's and included this code on the page:

var fadeimages=new Array()
fadeimages[0]=["images/fotos/punkt.gif", "", ""]
fadeimages[1]=["images/fotos/punkt.gif", "", ""]

new fadeshow(fadeimages, 250, 200, 0, 4000, 1)

punkt.gif is a transparent 1pixel gif.

Then I define other arrays and use the changeArray function to replace the images for the ones I want to show when the links are clicked. The problem is that when I click on the link, the first image appear immediatly and after the delay the same image is faded in... I guess the background-color is used to hide the image before it is faded in....

Please, if you have any idea how I can make this work, let me know... I'm still trying to understand how the script works ...

Thanky you very much for your help!

Daniel

[jscheuer1]

**********Important Note***********
With code: blocks in this post, be sure to scroll them to see all modifications contained therein.

I sort of wish that you had told me what you wanted in the first place. It's OK because I learned a few things I wanted to know in the process. To get a slideshow to appear blank to begin with, all you need to do is set its container's visibility to hidden (highlights green):

<span id="show">
<script type="text/javascript">
if (document.getElementById)
document.getElementById('show').style.visibility="hidden";
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), flag (0=normal, 1=begin paused), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 0, 1)
</script>
</span>

If you also create a flag (shown in red above and below) for all shows to create an option to begin paused. A few simple code modifications to the script may be made -

Add to the 'fadeshow' function (additions red):

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, flag, displayorder){
this.flag=flag
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
 . . .

Add to the 'resetit' fadeshow prototype function:

fadeshow.prototype.resetit=function(){
if (this.flag){
this.mouseovercheck=1
this.pausecheck=1
this.flag=0
}
this.degree=10
 . . .

And now we can add a much simpler function at the end of the main script to 'launch' our waiting slideshow(s):

function activateShow(num, id){
if (document.getElementById){
document.getElementById(id).style.visibility="";
setTimeout("fadearray["+num+"].mouseovercheck=0", fadearray[num].delay)
}
}

Its syntax in a link would be:

<a href="javascript:activateShow(0, 'show')">begin show</a>

where 0 is the number (once again of the slideshow) and 'show' is the id of its container element.

[gnuisnotunix]

Thank you for your help. I made some changes to the script, I used :

if (document.getElementById)
document.getElementById('show').style.visibility="hidden";

as you suggested to hide the slideshow (it was easier than I thought)

I wanted the images to switch immediatly when one of the links was clicked on, so I did some modifications to the script. I'm not good with javascript, so what I've done is probably not the best solution, but it seems to work

this is exactly what I needed: Test Page

Daniel

[jscheuer1]

Your code looks very nice! The only real problem is that because:

<script type="text/javascript">
if (document.getElementById)
document.getElementById('show').style.visibility="hidden";
var fadeimages=new Array()
new fadeshow(fadeimages, 250, 200, 0, 4000, 'show')
</script>

fadeimages has no elements, the script throws a non fatal error. This can be disturbing to some users. That could easily be fixed by using one of your existing arrays instead or by populating fadeimages with your two blank image entries as you did before:

<script type="text/javascript">
if (document.getElementById)
document.getElementById('show').style.visibility="hidden";
var fadeimages=new Array()
fadeimages[0]=["images/fotos/punkt.gif", "", ""]
fadeimages[1]=["images/fotos/punkt.gif", "", ""]
new fadeshow(fadeimages, 250, 200, 0, 4000, 'show')
</script>