Multiple fade-in slideshows

[Digihound]

Hey thanks John,

That looks fantastic. I'll incorporate it into my page and see how it goes.

Just for the record, what I meant by:

2 shows of 3x5kb and 1 show of 3x15kb

is that I have three slideshows. Each have three images. Two slideshows have images of around 5k per image, and one has images of about 15k per image.

Thanks again

[Digihound]

A short while later...

Thanks John, that seems to have really done the trick. It now makes it much tidier. And with your earlier suggestion of separating off the arrays, it now makes it possible for me to customise the photos for each page as well.

I've learnt so much from this thread. I'm very grateful to you. Am I allowed to use your modified script (provided I keep the updated header noting your modifications of course), or can I purchase the update from you?

I'll let you know the URL as soon as the site goes live - in 2-3 weeks.

Best wishes
Phil

[jscheuer1]

My terms of use are the same as those of DynamicDrive, credit must remain intact and be visible in the page(s) source that use(s) the script.

Dynamic Drive's usage terms

I also did a little more work on this script so that, if more than one show where to be on a page, their start times could be staggered* and the start of all shows would be delayed until all shows had loaded with the show(s) that load earlier place(s) occupied with its first image until all get loaded.

*This I found especially pleasing for FF where two or more shows had the same delay set as, in FF if two shows fade at the same time, the effect isn't as smooth. With the version you are using, from my live demo, this won't come into play except under certain conditions like - if the connection is very good or the images are already cached from a prior visit.

In general, this was a nice effect because two shows fading at once was more distracting than two shows each fading at their own staggered timing, particularly nice if the shows all have the same fade delay and the staggering period is the fade delay divided by the number of shows.

Let me know if you are interested, I will put up the code, I may do it anyway.

[jscheuer1]

Here's the demo I mentioned in my previous post. The 'stagger' variable can be set to 0 in the main script and then set on each page in the first call block on that page:

<script type="text/javascript">
stagger=1500 //set to amount of delay in milliseconds between start of each successive show, 0 for none

new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")

</script>

[Digihound]

Thanks John for both posts.

I'll ensure the credit is in the page as per DD's standard terms. Thanks.

Was this 'stagger' already built into the demo you put up previously (before the latest one)? My wife commented when she first saw it that 'they were not all changing at the same time'.

You said:

...the start of all shows would be delayed until all shows had loaded with the show(s) that load earlier place(s) occupied with its first image until all get loaded.

But the second demo doesn't seem to show this. They start at different times in sequential order. What settings need to be changed to achieve this? This would be ideal for my use.

Because of the way the content is laid out, my main (and biggest) show starts last. It becomes more complex in layout terms if I change the page order, but if your revision does allow for two scripts being held back completely until the third one has loaded, then this would be a big stepforward. Is there any way to get the script to define which picture loads first - I'm sure it can't be as simple as the listing order, and probably depends upon the order of the elements of the page.

You've been a great help with this one - some extremely good solutions. I think it deserves a 2.1 version because there have been so many enhancements!

[jscheuer1]

Short answer:

Set 'stagger' to 0.

Long answer:

Your wife is correct and there were two significant additions to the version with stagger. The obvious one is the optional staggering of the shows:

var stagger=1500 //set to amount of delay in milliseconds between start of each successive show, 0 for none

If stagger is set to 0, all shows will start at once. Which brings us to the less obvious addition, the use of the startAll() function. With or without a value more than zero set for stagger, none of the shows will start running until all are loaded. Stagger just adds an interval between them.

What your wife observed in the previous version was the lack of the startAll() function. Without it, each show started whenever its images happened to be loaded. I liked that effect but, it was totally random. Sometimes, if the images were already cached or if run from the local hard drive for example, they would all start at once. Other times, the length between starts would vary depending upon connection speed/bandwidth.

More information:

You should not forget that in Mozilla (FF and other Mozilla based browsers) if two or more shows fade at the same time, the effect becomes choppy. This can happen even with different delays set for the shows, because eventually a fade from one will coincide with a fade from another, the way to be sure that this won't happen is to set all shows to the same delay and the stagger to that delay divided by the number of shows.

[Digihound]

Thanks John,

Now I can grasp it.

I think that's me sorted now, so just a final thank-you!

Phil

[idahogrrl]

Hi There - I've been searching through posts trying to find the answer, and I think I'm close, but still having a problem.

I have 2 slideshows on the same page. No problem there, they're both working.

I want one slideshow to start on page load, but I want to start the 2nd slideshow about 6 seconds later (after the first one finishes).

It looks like the var stagger=3000 (or whatever) is the key, but I've tried adding it to the code and it's not working - the 2nd script is starting at the same time as the first one.

I am just using test images in a test location right now - when I get it working I'll put the script where it needs to go on the page:

http://65.110.73.56/prototype3/

THANKS! I truly appreciate it!

[jscheuer1]

You can't just add stagger to the old script. And, once you have the updated script, 'stagger' is set only once per page in the first call. Make your first call like so:

			<script type="text/javascript">
var stagger=10000
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 260, 298, 0, 3000, 10, 1)
</script>

That's for a 10 second delay, change as desired. Make the second call like so:

<script type="text/javascript">

new fadeshow(fadeimages2, 140, 70, 0, 3000, 0)
</script>

Use this (the updated version of the script that uses stagger and true preloading) for your home.js file:

var stagger=0 //set to amount of delay in milliseconds between start of each successive show, 0 for none

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/lefthome1.jpg", "default.htm", ""] 
fadeimages[1]=["images/lefthome2.jpg", "default.htm", ""]
fadeimages[2]=["images/lefthome3.jpg", "default.htm",""] 
fadeimages[3]=["images/lefthome4a.jpg", "default.htm",""] 
fadeimages[4]=["images/lefthome4.jpg", "default.htm",""] 
var fadebgcolor="white"

var fadeimages2=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["images/test1.gif", "default.htm", ""] 
fadeimages2[1]=["images/test2.gif", "default.htm", ""]
fadeimages2[2]=["images/test1.gif", "default.htm",""] 
fadeimages2[3]=["images/test2.gif", "default.htm",""] 
var fadebgcolor="white"

////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delayf=delay
this.delay=delay/2
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
this.postimages=new Array() //preload images
if (iebrowser&&dom||dom) { //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="imgDiv'+this.slideshowid+'"  style="display:none;">')
for (var i_tem = 0; i_tem < this.theimages.length; i_tem++)
document.write('<img src="'+this.theimages[i_tem][0]+'">\n')
document.write('</div>')

for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=document.getElementById('imgDiv'+this.slideshowid).getElementsByTagName('img')[p].src
}
document.write('<div style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;"><!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->\n')
document.write('<span id=LB0'+this.slideshowid+' style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#777;left:-50px;top:-18px">Loading...</span>\n')
document.write('<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#222"><span id=LB1'+this.slideshowid+' style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#777"></span></span></span>\n')
document.write('<div id="show'+this.slideshowid+'" style="visibility:hidden;">\n')
}

else
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
if (iebrowser&&dom||dom) {//if IE5+ or modern browsers (ie: Firefox)
var filtering=typeof document.body.style.opacity!=='string'? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-khtml-opacity:10;-moz-opacity:10;' : ''
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;'+filtering+'opacity:10;background-color:'+fadebgcolor+'"></div><img id="temp'+this.slideshowid+'" style="position:relative;z-index:1000;" src="'+this.theimages[0][0]+'"><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;'+filtering+'opacity:10;background-color:'+fadebgcolor+'"></div></div></div></div>')
}
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.images_loading_bar()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
obj.delay=obj.delayf
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

fadeshow.prototype.images_loading_bar=function(){
var m00=document.getElementById('imgDiv'+this.slideshowid).getElementsByTagName('img');
var m01=m00.length;
var m02=0;
for(var i=0;i<m01;i++)
m02+=(m00[i].complete)?1:0;
document.getElementById('LB1'+this.slideshowid).style.width=Math.round(m02/m01*100)+'px';
if(m02==m01){this.readyFlag=1;setTimeout("document.getElementById('LB0"+this.slideshowid+"').style.display='none';document.getElementById('show"+this.slideshowid+"').style.visibility='visible';if(["+this.slideshowid+"+1]==fadearray.length)startAll()",300);}
else setTimeout("fadearray["+this.slideshowid+"].images_loading_bar()", 64);
}

function startAll(){
var ready=0
for (var i_tem = 0; i_tem < fadearray.length; i_tem++)
ready+=fadearray[i_tem].readyFlag? 1 : 0;
if (ready==fadearray.length)
for (i_tem = 0; i_tem < fadearray.length; i_tem++){
if (stagger){
setTimeout("fadearray["+i_tem+"].startit()", stagger*i_tem)
setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000+stagger*i_tem)
}
else {
fadearray[i_tem].startit()
setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000)
}
}
else
setTimeout("startAll()",300)
}

[jscheuer1]

I ran out of room in the last post which has the answer to your question. I just wanted to add that, if setting 'stagger' on the page, as I've given instructions for in my last post, stagger should be 0, as shown, in the main script.