CMotion Gallery - Start scrolling before all images download?

[bsjd00]

Regarding http://www.dynamicdrive.com/dynamici...ongallery.htm:

Is there any way to set the scroller to be able to scroll before all images download? I have seen some of my visitors frustrated when the scrollbar is "locked" while the images are being loaded.

Any info would be greatly appreciated!

[bsjd00]

I guess it's not possible?

[jscheuer1]

I think it may be possible but, it would require a major rewrite. What scrollbar are you talking about? There is no 'scrollbar' associated with this gallery that I know of.

[bsjd00]

I'm sorry, I was not very eloquent in describing the application.

I was talking about the thumbnail boxes which appear below the full-size image. Presently, you cannot scroll the thumbnails from left to right until all of the thumbnails and full-size images have loaded.

I was hoping there was some way to possibly circumvent this, so that you could begin the scroll either immediately, or as soon as all of the thumbnails (but not the full-size images) have loaded.

I can see why the thumbnails might have to load, since they need to be loaded for scrolling purposes, but I was hoping that the full-size images (which are obviously bigger in file size) could be loaded on-demand.

[jscheuer1]

Yep, you put your finger on it, why you were confusing me alright. I get it now. There is a problem or, tradeoffs actually in what you propose. Since the large images fade in, they need to be preloaded, otherwise until they are all cached by clicking on each thumbnail at least once, there will be nothing there to fade in and you will instead see the broken image symbol as they are loading and then bam! There they will be. My solution is a variation on one of the ideas from my previous (private) response. We will still preload the large images but, not until after the cmotion slider is populated and initialized. This will give rise to situations where it will be possible to click on a thumbnail and its large image (not being loaded yet) will behave as I explained above. However, the longer the page sits there, the less likely this will be. And, since preloading will begin with the first large images, it is less likely that any will be called for before they are ready but, as I said, a definite possibility. Here is how to modify the two scripts to accomplish this state of affairs:

First to the Thumbnail Viewer III script (the on page script in my demo), get rid of this line:

this.postimages[p].src=theimages[p][1]

Then find this line:

document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

Change it to this:

document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+theimages[0][1]+'"></div>')

Next find this line:

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

Change it to:

slideHTML+='<img src="'+(this.postimages[picindex].src!=''? this.postimages[picindex].src : this.theimages[picindex][1])+'" border="'+this.imageborder+'px">'

Ok, that takes care of the on page script. Now in motiongallery.js, near the end of fillup() add this code, I'll show before:

loadedyes=1
if (endofgallerymsg!=""){
creatediv()
positiondiv()
}
}
window.onload=fillup

and after:

loadedyes=1
if (endofgallerymsg!=""){
creatediv()
positiondiv()
}
for (p=0;p<fadearray[0].theimages.length;p++)
fadearray[0].postimages[p].src=fadearray[0].theimages[p][1]
}
window.onload=fillup

That should do it!

[jscheuer1]

The solution worked perfectly. Thank you for taking the time to modify the code.

I do have, unfortunately, two more quick (hopefully) questions:

1. Is there a way to increase the speed at which the images fade in and out? (I'm not talking about the scroll speed of the thumbnails, but how quickly the larger images fade in and out when you click on the thumbnail.)

2. More importantly: I've noticed that if you print the page through Firefox, the thumbnails and larger image all print normally. However, if you print the page through Internet Explorer, the thumbnails print normally but the larger image prints faded - as though it is still fading in. Is there any way to fix this?

Thanks

Note: Below changes are all to the Thumbnail Viewer III script.

To increase the speed of the fade in, change this line in the function fadepic(obj):

obj.degree+=5

to:

obj.degree+=10

or whatever value suits. 10 is pretty fast.

The printing question is a bit more involved. Find these lines in the function displayarea():

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

Replace them with these:

if (iebrowser&&dom||dom) { //if IE5+ or modern browsers (ie: Firefox)
if (document.body.filters||document.documentElement.filters){
document.write('<style type="text/css">\
@media print{\
#'+this.canvasbase+'_0, #'+this.canvasbase+'_1{\
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);\
}\
}\
@media screen{\
#'+this.canvasbase+'_0, #'+this.canvasbase+'_1{\
filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);\
}\
}\
<\/style>')
}
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;-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;-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
}
else