Ultimate Fade-in slideshow - two problems

[absolutely]

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/...entslide.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]

*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

[ddadmin]

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]

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]

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]

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]

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?

[tmowner]

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]

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?

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/d.../?promoid=BINR

Hope you get your page sorted out.

[absolutely]

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

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