PDA

View Full Version : Ultimate Fade-in slideshow - two problems



absolutely
01-18-2006, 07:39 PM
Hi, I have been looking for a suitable slideshow for many months now and all the ones I have seen have had limitations in one way or another. Then I found Johns Ultimate Fade-in slideshow and I thought it was perfect.
I need the show for a photographic clubs site to show the members photos.

I setup the slideshow code, which is very easy to program and I found it does pretty much exaclty what I want. It was perfect running it from hard disk. The problem came when I decided to run it over the web.

I have over 50 largish photos in the show (some as big as 780 x 560), the sizes vary as do the aspect ratio (Some are letterbox shaped).
Yes all images are web optimised to the max.
Over time the quantity of images will increase, so pre-loading every single image at the start is out of the question, just as is trying to preload them on the webpage that launches the show.

I have looked at other peoples questions about this script but can not see an answer to the following...

Problem 1)
I have 2Mb broadband connection, When I goto view my slideshow I find that until it has pre-loaded in ALL of the photos then the show is very jumpy. I need to run the show in random mode and because of this fact, if it has not yet loaded the next image that it is about to show then it shows nothing at all.
This has the effect of showing blank for several shots until they are all loaded. Running the same thing via Firefox I find that that browser seems to load them as required instead. This seemed to ruin the fade effect on some.

What I need is for the script to pre-load the data for the next image while it is showing the last one. I have found a few scripts on other sites that do just that (see link below) BUT they do not offer a random sequence.

My question is, Can you modify your script so that it will ONLY pre-load one image at a time and ONLY start to do so when it is showing the last one?
This has to be able to cope with the random sequence. I will be setting the view time for each slide to 8 secs so there is time to load the next one. I guess it would have to wait until it has all the data before it does that.

Example of a slideshow script which pre-loads one image and also waits until it has all the data..
http://www.javascriptkit.com/script/script2/incrementslide.shtml

Problem 2)
I have followed your code example for centering but this ONLY seems to centre the images horizontally on the page. It does not centre the images vertically on the page. Not sure if this is because my images vary in size.
I have seen methods of making things in the Dead centre but can you advise.

Example of a dead centered object :
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Best wishes
Andy

absolutely
01-19-2006, 07:28 PM
*BUMP*
I have made a demo page so you can see the problems I have mentioned in the previous post.

Click this link below, then click the slide show button.
http://www.absolutelyandy.com/demo/dynamicdrive_01/

This has 48 large photographs, the display time set to 10s

As you can see, the photos that are letterbox format (longer than they are tall) are showing at the top of the screen rather than centered vertically on the screen. How do I fix this?

And the other problem..
The show runs smoothly once its pre-loaded all of the images, but at the start it really has problems. This is why I need it to pre-load only the data for the next image while it is showing the last one. This will allow me to add lots more photos without it getting worse and worse.

Please help:rolleyes:

ddadmin
01-20-2006, 01:41 AM
Ok, I'll take a closer look at the incremental preload function tonight, and post an update. Vertically aligning odd size images within a DIV is tougher than it looks. Maybe there's an easy solution, and if I find it, I'll add it to my update. :)

ddadmin
01-20-2006, 05:03 AM
Ok, try the below version of the script, which differs in that the images should be preloaded incrementally, the one to be displayed as the current one is being shown. It's actually almost identical to the original script, with only 3 or 4 lines changes. (See the comments: //INC PRELOAD CODE)


<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

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
fadeimages[3]=["test.gif", "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

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.delay=delay
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)
this.postimages=new Array() //preload images array
for (p=0;p<theimages.length;p++)
this.postimages[p]=new Image()
this.postimages[0].src=this.theimages[0][0] //INC PRELOAD CODE- preload first image within array
this.postimages[1].src=this.theimages[1][0] //INC PRELOAD CODE- preload second image within array

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
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;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></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.startit()
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{
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
if (obj.nextimageindex!=0 && obj.postimages[obj.postimages.length-1].src=="") //INC PRELOAD CODE: if next image hasnt been preloaded
obj.postimages[obj.nextimageindex].src=obj.theimages[obj.nextimageindex][0] //INC PRELOAD CODE: preload next image

setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

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=obj.degree/100
}


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

</script>

<body>

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

</script>

Let me know if it works.

tmowner
01-20-2006, 05:13 AM
I correctly inserted the code for the ultimate fade in slide show on my webpage, and I was very excited. Then something strange happened at least three times tonight. After I uploaded to the internet, I went back to make a few more corrections to the page. Once I uploaded the new changes, the body disappeared. However, when I clicked on preview in FrontPage, the page looked normal, with the slideshow working. But when I clicked on the html view, the body was gone. I am not sure why, but would love the help to correct this problem . My page is www.yourtreasuredmemories.com.

TIA
Cindy

absolutely
01-20-2006, 06:04 AM
when I clicked on preview in FrontPage, the page looked normal, with the slideshow working. But when I clicked on the html view, the body was gone. I am not sure why, but would love the help to correct this problem . My page is www.yourtreasuredmemories.com.
TIA
Cindy

Hi Cindy, This is the problem with using Frontpage to make web pages, You are not in full control of the html being made! Looking at your code on the link you provided its not working because the script is not in the body section, in fact its not there at all. Also you seem to have FOUR body start tags !

FrontPage has a habit of messing up html without you knowing. Best to use another web page design package or use notepad for adding scripts. Best is to use UltraEdit, well worth buying it.
Hope this helps

Andy

tmowner
01-20-2006, 01:54 PM
Andy,
Thanks for the reply. But the script was originally in the body section. As soon as I uploaded to the web, the script disappeared and left me with 4 body start tags.

Since the site has already been created in FrontPage, what do I do now? Should I purchase another program and re-create the entire site? Or should I copy the pages into another software program?:confused:

tmowner
01-20-2006, 04:39 PM
Unfortunately,
After many unsuccessful tries, I decided to delete the slide show. Even though the page looked awesome and the show very impressive, I can't run the risk of someone going to my site and there is nothing there. :( I will just try another slide show and hope for the best. This was the most unusual thing I have ever experienced.

I didn't know FrontPage would cause so many problems. If someone else would like to recommend another program to create my website, or re-create it, I am open to suggestions.

absolutely
01-20-2006, 07:07 PM
Andy,
Thanks for the reply. Since the site has already been created in FrontPage, what do I do now? Should I purchase another program and re-create the entire site? Or should I copy the pages into another software program?:confused:

Hi Cindy, I have been creating websites sine 1997, In those years I have tried many, many programs including Frontpage. Of all of those tried I found Frontpage the worst, It makes it easy for people to make a site but it takes control over the code generated, This is where the problem occurs. If you are just making a basic website with nothing fancy then its ok but once you want to add scripts and other unusual things then it all goes wrong.
Frontpage uses its own Microsoft specific code, this is not a good idea.
These days websites must meet a set of standards, all the current browsers support a set of standards which mean that if you use standards then they will all show your page the same.

Personally I found that when I loaded pages I had created in Frontpage into another package things got worse. Its best to start again from scratch so there are no silly bits of code left in your pages.

I recommend Dreamweaver, it may not look as easy to use as frontpage BUT it makes standard code that works perfectly on everything. And YOU are in full control of everthing.

Dreamweaver
http://www.macromedia.com/software/dreamweaver/?promoid=BINR

Hope you get your page sorted out.

absolutely
01-21-2006, 05:12 PM
Ok, try the below version of the script, which differs in that the images should be preloaded incrementally, the one to be displayed as the current one is being shown. It's actually almost identical to the original script, with only 3 or 4 lines changes. (See the comments: //INC PRELOAD CODE) Let me know if it works.

Thanks John :) :) :)
Yes it seems to work, I have added more images to the page to be sure it can handle it. Try the new version here :

Example of Ultimate Fade-in slideshow with single image preloading (http://www.absolutelyandy.com/demo/dynamicdrive_01/index_v2.php)

I have 65 photos in this show, which add up to 2.85Mb total. So as you can see it seems to be ok, IT does not hammer the internet connection at the start. Your orignal script would have tried to cache in all 2.85Mb at the start of the show, this one is lots better for people wanting to show lots of large images.
You may want to make it clear on the DD site that v1.5 is not really suitable for lots of large images unless you are running it from a hard disk.

Just one problem to sort
If you can sort out a way to centre images vertically then it would be perfection. If you view my show in Firefox and press F11 to go fullscreen you will see the smaller height photos and letterbox format ones all show at the top of the screen. Your current centering method seems to centre the images based on the largest image used. This does not centre on an image by image basis. If you could make it do that that would be great.

Any ideas ?

Best wishes
Andy

ddadmin
01-21-2006, 09:34 PM
Hi Andy:
I did quickly try to find a solution for the vertical centering issue when working on the incremental preload, though didn't find it. I'll fiddle around it some more later today, and post an update if I find something. The next chance for me to look at this is when I officially update this script to add in the increment preload feature. It looks like other people could use it too.

absolutely
01-22-2006, 04:50 PM
Hi Andy:
I did quickly try to find a solution for the vertical centering issue when working on the incremental preload. I'll fiddle around it some more later today

Thanks ever so much for taking the time to look at this,Hope you can solve this final problem of vertical image centering of different size images.

Cheers

absolutely
01-27-2006, 05:58 PM
Hi Andy:
I did quickly try to find a solution for the vertical centering issue when working on the incremental preload, though didn't find it.
Hi, Have you had any luck yet creating vertical auto centering of mixed height images for the Ultimate fade-in slideshow script?
This is the only thing preventing me from using the script in hte way I need it.

Hope you can sort this problem at some point.
Thanks in advance.

Andy

jscheuer1
01-27-2006, 11:23 PM
That is actually easier than it might at first appear. The default positioning of an image in a table cell is vertically centered. So, to get the images centered, at least within the slideshow's dimensions, just add a single celled table to the fadeshow.prototype.populateslide function (additions/changes red):


fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML='<table width="100%" height="100%"><tr><td>'
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>'
slideHTML+='</td></tr></table>'
picobj.innerHTML=slideHTML
}

absolutely
01-28-2006, 03:22 PM
So, to get the images centered, at least within the slideshow's dimensions, just add a single celled table to the fadeshow.prototype.populateslide function

Thanks John !, This ammendment to your original code has solved the vertical centering of images problem.

As you can see here :
Example script with changes to vertical center the images. (http://www.absolutelyandy.com/demo/dynamicdrive_01/index_v3.php)

Thanks for looking at this and solving the problem as well as the single caching of image issue.

thanks
Andy:)

ddadmin
01-28-2006, 10:49 PM
Wow very clever John! And here I was trying to think of different ways to do this using CSS, but in this case just using something tried and true and straightfoward is best.

absolutely
02-22-2006, 05:00 PM
Hi, I have one small request to be added to the Ultimate Fade-in Slideshow code and that is the ability to close the browser window by clicking on the slideshow image area.

I need this addition so that it responds in the same way as all the other photo viewer windows on my website. The user can close the photo window just by clicking anywhere on the photo. So you understand what I mean just click on a thumbnail on my page here :

Example of being able to close a photo window by clicking on it. (http://www.derbyphotos.co.uk/areas_a_h/arboretum_park.htm)

Then click anywhere on the large photo that shows, as you can see it closes the window and returns you to the thumbnails where you can click on another.

The html code to do this is..


<a href="javascript:self.close()"><img src="my_large_photo.jpg"</a>

Obviously this only works if you have opened your fullsize image in a new window, otherwise you will get a warning.

So my question is what changes are needed to the ultimate fade-in slideshow code in order to allow the very same method of closing the window by clicking on the images in the show?

Hope you can help. :)
Thanks

Twey
02-22-2006, 05:26 PM
Replace:
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'With:
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'" onclick="return displayImage(this.src);">'
Add this function to the script block somewhere:
function displayImage(source) {
var v = window.open();
v.document.open();
v.document.write('<html><head><title>Image on ' + window.location.host + '</title></head><body><img src="' + source + '" onclick="window.close();"></body></html>');
v.document.close();
return false;
}That should do it.

absolutely
02-22-2006, 05:59 PM
Thanks for looking at this one for me, I have just tried it but it does not seem to work, Window remains open and the mouse pointer does not change to a hand when you are over the image area.....

See here :
Example with your code changes (http://www.absolutelyandy.com/demo/dynamicdrive_01/index_v4.php)

any ideas?

I have put the function at the bottom of the script section is this ok or should it be somewhere else?

Twey
02-22-2006, 06:09 PM
I have put the function at the bottom of the script section is this ok or should it be somewhere else?No, that's fine.
I'm sorry - I think I misunderstood you. You want the window to close when the images in the slideshow are clicked? I thought you meant the full-size image in another window that appears when the image is clicked.
That's an easier one: wrap the script in the following div:
<div onclick="window.close();">
<!-- Code goes here -->
</div>
If you want a hand cursor over the image, add style="cursor:hand;" to the div tag.

absolutely
02-22-2006, 07:23 PM
Thanks, thats more like it. Works a treat exactly as I wanted.

See it in action here :
Viewer with close window on image click (http://www.absolutelyandy.com/demo/dynamicdrive_01/index_v5.php)

Also I have amended the script to use the TITLE method of popup info.

Change the line..

slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'

Into this..

slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px" TITLE="Click anywhere here to close this slide show viewer window.">'

This works in all modern browsers (unlike ALT which only works in IE).

thanks again.
Andy

boojum
05-22-2007, 10:08 PM
Hello,

Like some others, I have been looking for custom modifications to the Ultimate Fade-In Slideshow Script. I am looking for a specialized preloading modification as described in this archived thread: http://www.dynamicdrive.com/forums/archive/index.php/t-10776.html

In other words, I am looking for a version of the script whereby each subsequent image will only be shown after it has been completely loaded into the browser's cache first. Thus to begin with, simple text such as "Loading..." will temporarily be shown in place of any images, until the first image is ready to show, at which point the slideshow will show the first image, and will continue to show it until the second image is fully downloaded in the background, etc.

My reasoning behind wanting such a specialized solution is that I connect via dial-up speeds, and am creating a slideshow with 10 photos sized at approx. 30 KB each.

ddadmin has provided a similar modification ( see http://www.dynamicdrive.com/forums/showthread.php?t=7203 ), however this modification does not wait until the next image has completely downloaded. jscheuer1 provided a seemingly perfect solution ( at the aforementioned http://www.dynamicdrive.com/forums/archive/index.php/t-10776.html ), however the problem is that his version does not play beyond the second slide in Safari 2.

jscheuer1 has also created a new thread with his "ideal" version of the script at http://www.dynamicdrive.com/forums/showthread.php?t=20221 -- sadly, however, this does not include the modified preloading functionality whereby the script only shows the next image after it is fully loaded into the browser's cache.

Does anyone know how to modify the code that jscheuer1 posted at http://home.comcast.net/~jscheuer1/side/files/u_fade_inc_preload.htm -- so that it will work without bugs in Safari 2? It appears his code still works perfectly in Firefox and Opera, without any Javascript errors that might clue me into why Safari 2 shows only the first two slides (after which it displays a little "?" icon for the third slide, even though that image is indeed on the server, as it shows up just fine in other browsers).

Thanks! - Boojum

jscheuer1
05-23-2007, 04:34 AM
Well, I don't know too much about Safari. However, I do know that both Opera and FF tend to be forgiving about the complete status of an image if it is missing altogether. IE isn't, perhaps Safari isn't either. So if the spelling or upper and lower case or path for any of the images is invalid or there is any problem with the array, that could be the problem. You may think they (the images) are all there but, that could just be because Opera and FF are skipping any that are missing/misspelled, etc. To be more specific, I would need a link to your page.

Just out of my own curiosity, when you say:


his code still works perfectly in Firefox and Opera, without any Javascript errors that might clue me into why Safari 2 shows only

Does this mean Safari has no error reporting of its own?

jscheuer1
05-23-2007, 04:49 AM
Another thought I had on this is that when I wrote (Swiss Army Image Slideshow):

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

I included incremental preloading in it and the routines for that may be more widely compatible for Safari, etc. - if that is really your problem. At least I have had no complaints so far.

Try out the demo page for that script in your Safari browser. If it works out, try it with your images in Safari. If you are still good, we can add in the word "Loading . . ." easily enough.

Note: Swiss Army Image Slideshow can, if desired, be made to look just like U-fade via its configuration properties.

boojum
05-23-2007, 05:11 AM
Thank you for your quick response!


Well, I don't know too much about Safari. However, I do know that both Opera and FF tend to be forgiving about the complete status of an image if it is missing altogether. IE isn't, perhaps Safari isn't either. So if the spelling or upper and lower case or path for any of the images is invalid or there is any problem with the array, that could be the problem. You may think they (the images) are all there but, that could just be because Opera and FF are skipping any that are missing/misspelled, etc. To be more specific, I would need a link to your page.

Actually the link is to your page, not mine :) I figured you hadn't left out any images, especially as my own page performed exactly as yours did -- perfectly in all except Safari 2 (i.e. this error of showing just the first two images in Safari, and no others, no matter how large the array). Here's the link again to your page: http://home.comcast.net/~jscheuer1/side/files/u_fade_inc_preload.htm


Does this mean Safari has no error reporting of its own?

I'm not much of a Safari user actually... I just test in all browsers on all platforms before publishing. Safari's interface seems built for folks who neither desire nor need the technical details; I trust Firefox and Opera to do error reporting, and had figured that since they showed no errors, Safari was the one to blame.

Thank you for your link to the Swiss Army Image Slideshow... I will take a look at that when I am more awake in the morning :) I had hoped your original code at http://home.comcast.net/~jscheuer1/side/files/u_fade_inc_preload.htm might be made to work with Safari 2, as it so perfectly fit my needs in all other respects, but perhaps I will have to re-evaluate.

Thank you again! - Boojum