Ultimate Fade-in Timing Issue

[SpinyNorman]

1) Script Title: Ultimate Fade-in

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I've selected "always" for descreval. I have fadeduration and pause at 2500. I like the nice, slow transition. Problem is, the captions appear as soon as the fade-in begins. It makes it look like the captions appear way before the image. Is there any way to delay the captions a little, so they appear near the end of the fade-in?

[Beverleyh]

Towards the top of the fadeslideshow.js file there's a line that looks like this;

slidespeed: 200 //speed of description panel animation (in millisec)

Try increasing the value from 200 to 2500. You might need to do a hard refresh to pull through the new js file (CTRL+F5 on Windows)

[SpinyNorman]

The slidespeed seems to only effect the timing if you have the description panel set to "peekaboo." I can set the slidespeed to any number and it won't affect captions set to "always." Change descreval to "peekaboo" and the transition speed changes with slidespeed values.
Here's a link to a test page:
http://www.canfieldsci.com/imaging_s..._hub_demo.html
You can see how the caption arrives too soon if the fadeduration is set to a slow rotation.

[jscheuer1]

You can try this. Using a text only editor like NotePad, edit the fadeslideshow.js file. About two thirds of the way down find this code:

		if (setting.$descpanel){
			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
			if (setting.imagearray[imgindex][3]) //if this slide contains a description
				setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
		}

Add the highlighted (two places on one line, contents of the code block might be wrapped):

		if (setting.$descpanel){
			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
			if (setting.imagearray[imgindex][3]) //if this slide contains a description
				setTimeout(function(){setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3]);}, 750);
		}

Save and use that version. Untested.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[SpinyNorman]

Thanks, John

This solves the timing problem.

There is one glitch. Our first image does not have a caption. It's more of a title slide. With this new code, an incorrect caption appears briefly with the second "slide." It's the caption from the last slide.

See the problem here:
http://www.canfieldsci.com/imaging_s..._hub_demo.html

So far, the only solution I've found is to add a caption to the title slide, which we didn't really want. Now the glitch appears only at the beginning of the first cycle.
Warning: there is some nudity. Our customers are plastic surgeons:
http://www.canfieldsci.com/imaging_s..._hub_test.html

[jscheuer1]

That (the partial nudity) is PG and not intended to excite, so it's fine. Even if it weren't we would still allow a text only link for purposes of receiving help here.

OK, let's try (same code area in the fadeslideshow.js file as before - additions highlighted, 3 lines, code may wrap):

		if (setting.$descpanel){
			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
			setting.previmage = imgindex>0? imgindex-1 : totalimages-1; //get reference for the previous slide
			if(!setting.imagearray[setting.previmage][3]) //if previous slide had no description
				setting.$descinner.empty(); //empty the description area right away without waiting for the next description
			if (setting.imagearray[imgindex][3]) //if this slide contains a description
				setTimeout(function(){setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3]);}, 1500);
		}

Again, untested, and -

The browser cache may need to be cleared and/or the page refreshed to see changes.


Added Later:

Or, you could replace that entire block of code with:

		if (setting.$descpanel){
			setting.previmage = imgindex>0? imgindex-1 : totalimages-1; //get reference for the previous slide
			if(!setting.imagearray[setting.previmage][3]) //if previous slide had no description
				setting.$descinner.empty(); //empty the description area right away without waiting for the next description
			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3] && setting.imagearray[setting.previmage][3])? 'visible' : 'hidden'})
			if (setting.imagearray[imgindex][3]){ //if this slide contains a description
				setTimeout(function(){
					setting.$descpanel.css({visibility: 'visible'});
					setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3]);
				}, 1500);
			}
		}

I was able to test that in a limited way and it seems to work out quite well.

[SpinyNorman]

Thanks, John

This works great. And I really appreciate the commenting in the code.

SpinyNorman

[jscheuer1]

Good. One thing I didn't notice until now is that:

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

Please take care of that by changing this on the page:

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

to:

<script type="text/javascript" src="/js/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

Thanks.

[SpinyNorman]

done. Thanks again.