Multiple fade-in slideshows

Printable View

05-05-2006, 03:42 PM
Digihound

Multiple fade-in slideshows

I have a site which needs 'Ultimate' fade-in slideshows on a number of pages. The is being built using Dreamweaver's nested template system, so I have to work out how to allow for the different photos to be used on each page.

As it stands at the moment I have to use a different version of the slideshow script for each page (now converted into an external javascript file), because the script includes the data for the images.

Dreamweaver allows you to include editable regions in the <head> but not optional regions. So, I can change the name of the script, but I can't miss it out on pages that do not use it.

Someone on another forum suggested using:

Code:

@@(optionJS==""?'':'<script src="'+optionJS+'" type="text/javascript"></script>')@@

in the head, and then using Modify>Template to add the necessary script each time. But this seems rather long-winded - particularly since there are are more pages that do have slideshows than don't.

I thought that, if I was to create a javascript which runs but does nothing (effectively a null javascript), and then edit the head to point to that when no slideshow is needed, that could solve the problem. This could then replace the name of slideshow.js But what's the minimum I could include in that file to ensure it didn't crash?

Or is there some way of running the same script, but getting it to call different data fles for the image data?

Or can anyone suggest another way round it?

Your comments are very much appreciated. I'm gradually learning!
05-05-2006, 04:05 PM
jscheuer1

The Ultimate fade-in script uses different arrays, configured at the beginning of the script. These arrays could all be defined there in one external version and then be called only on the pages where they are needed as the part of the script that goes in the body of the page is the part that determines which array is to be used.

Alternately, the script could be used externally with no arrays, then on each individual page where it is to be used, the array(s) for that page could be defined in a separate script, as long as that script was above the in body call for the script. Example script with array only:

Code:

<script type="text/javascript"> 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 </script>

The array(s) for the page could also be defined in with the in body call for the script:

Code:

<script type="text/javascript"> 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 //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder) new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R") </script>

To answer your question about how much code must be included in a 'dummy' external script to avoid an error, none. If you have a call like this in the head:

<script type="text/javascript" src="dummy.js"></script>

and no file by the name of dummy.js exists, then there will be no error and, of course, it will have no effect on the page.
05-10-2006, 04:54 PM
Digihound

John, what an immaculate explanation!

First of all, sorry I've taken so long to call back, but I've been having problems with internet access.

Thank you for spelling this out so simply. I knew what I wanted to do, and that it could be done, but not how.

I think I'll go for the separate script in the page defining the arrays. With a couple of hundred photos involved, it would be too much in a .js, and the other might distort the page. Presumably the 'script in page' could be included in the <head>?

:rolleyes: The only other thought in the back of my mind is about preloading the images. If they are pre-loaded (say with the Dynamic Drive preloader) do they have to be referenced at a specific location, or are they simply there in the browser for any part of the page or any script included in it to call on?

What I'm thinking is, can I easily preload all my images (included in the slideshow script or not) so that my visitors don't have to wait once the initial loading is done. Or would this involve storing them in specific locations and then calling them from those specific locations - which could get quite complicated with a couple of hundred images on the site.

Thanks again
Phil
05-10-2006, 06:13 PM
jscheuer1

This part of the script has to be in the body of the page, it goes in the flow of the document, in the spot where you want the slideshow(s) to appear (example with one slideshow):

Code:

<script type="text/javascript"> //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder) new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R") </script>

Including the array definition for that slideshow, just above the call as I mentioned before will not 'distort' the page but may be a problem if you are managing your pages in FrontPage or possibly in some of the other WYSIWYG HTML editors out there. This is a separate issue and has a separate solution, if it even applies. Using a separate script in the head for the array(s) is fine but the call (above) must go in the body.

Preloading images is generally best done piecemeal and just in time for when they are needed. However, all preloading depends upon your having one and only one copy of each image on the server. Preloading (or even loading) an identical image from a different location on the server, or from anywhere on the web, is seen as a separate image by the browser.

Once an image is preloaded, preloading it again will take no time.

Preloading images is still loading images and will take as long as it would without preloading, the only advantage is, if you strategically preload only those images that might be a problem if allowed to load normally, you avoid that problem.

I like to preload a few key navigational images sometimes and I do it on a page prior to the page that uses them.

The best strategy for preloading with these slideshows is the one already employed by the script. Under certain circumstances, it can be advantageous to only preload a few images at a time, loading others as the show is running.

DDadmin worked this out in another post somewhere, I'll see if I can find that, rather than duplicate the effort.
05-10-2006, 06:50 PM
Digihound

Thanks John,
The problem I'm having is that with 3x15k images and 2x3x5k images, the autochange on the slideshow starts running before the images are loaded - so the viewer only sees half an image loaded, before the script changes to the next one. This happens a couple of times before everything is up and running and loaded.
I thought perhaps that if I used a preloader with a progress bar, this would hold back the action on the page until the images were all ready to go.
If you can locate the other post, I'd appreciate it, or suggest how I might delay the script starting until the images are loaded.
Thanks again
Phil
05-10-2006, 07:00 PM
jscheuer1

With the situation you describe, you would need a preloading bar type thing or other preloader that delays the page load. Delaying the preloads further (as ddadmin's mod does) would not be useful here for obvious reasons.
05-11-2006, 12:40 PM
Digihound

I take your point on that one John, it all adds weight to the page.

You said in your last email:

Quote:

Preloading images is generally best done piecemeal and just in time for when they are needed.

I have three rolling fades on my page, which are all needed as soon as the page loads. It would look much tidier (contrary to what others might need) if they were all loaded before the script started rotating them - as I've already said, it looks messy because they half load and then swap.

I've searched the previous posts and found one or two that are similar, but there seemed to be no solution for them. What I need really is to move back to how the script originally was (before it began loading the image only just prior to displaying it) in a sense it would be better with rotating blank spaces than half-formed pictures. But how to do that when it's been amended for progressive loading I don't know.

Can you John, or anybody else help?
05-11-2006, 03:12 PM
jscheuer1

What version of this script are you using? The one from the demo page (Ultimate Fade-in Slideshow) preloads everything at one pass, however, preloading takes as long as loading does, so if the script starts displaying everything before each image is loaded, you have a problem. How many bytes are each of your images on average? Could you preload them on a previous page? In any case, you could preload with progress bar and that should take care of it.
05-12-2006, 10:25 AM
Digihound

Thanks John,

As mentioned earlier, I have 2 shows of 3x5kb and 1 show of 3x15kb. These are compressed as far as they will go. Sadly the client wants them on the index page, so there isn't an option of preloading on a previous page.

I guess I and the client have to accept the status quo.

Just thinking about it, there isn't a way to put a timer in the script, is there, so that it doesn't run until after a certain length of time after loading?

Thanks again
Phil
05-13-2006, 06:26 AM
jscheuer1

I'm not sure what exactly you mean by (though I have an idea):

Quote:

2 shows of 3x5kb and 1 show of 3x15kb

But, I took my own advice and found that it was wrong. If I preloaded an image in one way and peloaded it again in another (particular if that 'another way' was the slideshow's native method), it still took time to to load the images and if the slideshow were not delayed (for lower speed connections at least), the problems you already described would occur.

So, I adapted my favorite preload with progress bar script to the slideshow script and here is a demo of the result. Usage is the same as the original.
05-15-2006, 12:10 PM
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:

Quote:

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
05-15-2006, 03:46 PM
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
05-15-2006, 04:52 PM
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.
05-15-2006, 05:05 PM
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:

Code:

<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>
05-16-2006, 11:54 AM
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:

Quote:

...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!
05-16-2006, 04:27 PM
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:

Code:

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.
05-16-2006, 06:47 PM
Digihound

Thanks John,

Now I can grasp it.

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

Phil
06-18-2006, 11:42 PM
idahogrrl

still stumped by stagger - want 2nd slideshow to start a few seconds later

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!
06-19-2006, 06:12 AM
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:

Code:

<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:

Code:

<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:

Code:

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;">\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) }
06-19-2006, 06:15 AM
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.