PDA

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



gnuisnotunix
12-11-2005, 07:17 PM
Script : Ultimate Fade-in slideshow (v1.5)
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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
12-11-2005, 08:55 PM
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
12-11-2005, 09:04 PM
oops, I'm sorry.. I mean on the same page..

jscheuer1
12-11-2005, 10:54 PM
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
12-12-2005, 10:48 AM
Thanky you very much for your help! It works :D

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
12-12-2005, 02:19 PM
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
12-12-2005, 07:03 PM
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 :confused: ...

Thanky you very much for your help!

Daniel

jscheuer1
12-12-2005, 11:11 PM
**********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
12-13-2005, 07:36 PM
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) :p

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 (http://www.alsway.com/test/test.html)

Daniel

jscheuer1
12-13-2005, 08:42 PM
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>

gnuisnotunix
12-13-2005, 09:21 PM
I was testing the script with Firefox and didn't see the error message on IE... I will populate that array again...

Thank you!

Daniel

swcafe
12-16-2005, 08:17 PM
I've been searching for slide show scripts for a while now and this appears to be the best around. I have this page with a pre defined DIV with absolute positioning where the default slide show runs. My mission is to use that DIV and display whatever show is underneath a buton. My temptation is to put a changeArray() call as the action for the onClick() of the button. Can you offer a suggestion how to override the document.write('<div id="master'... and not mess up the fading, .etc. I made a couple of feble attempts like just settng the id to the name of my DIV and dumping everythng else but no-go. :confused:

jscheuer1
12-16-2005, 10:24 PM
There were several changeArray() functions put forth in this thread. None of them, as written here (I'm not including the one from the OP in their source) activate document.write. Which one are you using? Can we have a link to your page?

Also, is the problem with document.write even coming from changeArray() or are you trying to eliminate it from the script altogether? If the latter, you would be better off finding a way to follow the original script's demo instructions as far as positioning the slideshow on your page goes.

bcd80
12-17-2005, 05:23 AM
Please permit me to jump in here.
Have I missed something? Is there a way to specify the length of the fade? My first usages of the script are to rapidly cycle the images (delay less than .5 seconds). When I do that, the fade occupies a larger amount of time. I know I can turn fade off, but I really just want to be able to speed it up or slow it down.
Otherwise this script is a godsend.
Thanks,
BCD :)

jscheuer1
12-17-2005, 06:11 AM
This line and, specifically the value 50 at its end, is where the rate of fading is set for all slideshows:


fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)

The smaller the number, the faster the fade rate. Because of the way some browsers handle the setIterval() method, 20 is the smallest this number should ever be. Fortunately, at that rate, the fade is so fast as to be all but imperceptible. If you make it too high of a number, odd things may happen because, fading will not be competed before the next rotation of images.

You can insert a variable name there instead (say, _rate) and control its value from elsewhere. If you need this rate to be independent for each show, it will need to be this._rate and be set initially using an added parameter with the command that starts each slideshow and then set for each slideshow in the function fadeshow() via this parameter:


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

and could be accessed from outside the main body of the script as fadearray[num]._rate, where num is the instance of the slideshow concerned.

You seem to know what you are doing but, if you need more details, let me know.

bcd80
12-17-2005, 04:18 PM
John:
Thanks much for the help on the fade rate parameter.
It is amazing what even untrained programmers can do these days with the generous assistance of others.
You can view my implementation at
http://www.cdysl.org/photos.asp
I'm just trying to deal with a bit of a slowdown in load time for the menu script on this page now. But basically I'm thrilled with this outcome.

BCD

swcafe
12-19-2005, 02:16 PM
The doc.write() I referenced is in the function fadeshow() and that is the DIV I was referring to. I am going to play around a bit and see if I use the changeArray() idea in my current model. I'll send you sample when I get it up and running. Thanks for your time!