Ultimate Fade-in slideshow onslide even handler

[Darkhorse]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem: Need help with onSlide event handler

In the script file fadeslideshow.js around line 141, there are settings that will hide the desc panel before the next slide (if peekaboo is being used).

if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
			clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
			slideshow.showhidedescpanel('hide', 0) //and hide it immediately
			
		}

I can't figure out how to get the same effect after adding an onslide event handler. I would like the onslide event to hide immediately before the next slide loads. My onslide event code is:

onslide:function(curimage, index){
		var imagearray=this.setting.imagearray
		var extraEffect="<div style=\"left:30px;position:relative;\"><img src=\"img/slide1-img.png\" \/><\/div>"
		jQuery('#extraEffect').delay(1000).fadeIn(1000);
		jQuery('#extraEffect').html(imagearray[index][4]);

Right now when the 'Next' button is clicked (or when it's in manual mode), the onslide event will continue even if the next slide is loading and the timing of the slideshow becomes out of sync. Basically, I want extraEffect to also hide when the desc panel hides but I'm not sure how to go about it. I hope someone out there can at least offer a hint.

[jscheuer1]

I can tell you that the onslide event fires when the animation that's fading in the new image completes. This occurs (in an installation with:

fadeduration: 500, //transition duration (milliseconds)

in its on page new fadeSlideShow options as the examples on the demo page do) about 500 milliseconds after the slide begins to change.

Other than that, I'm having trouble visualizing what you're talking about.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

And please try to be more specific about what exactly you want to have happen.

[Darkhorse]

Thanks for the reply John. This is how my slideshow is working right now.

1) Slide background fades in.
2) Peekaboo effect with sliding text comes in from left to right.
3) An image on the right side fades in 500 milliseconds after the peekaboo text.
4) Peekaboo text slides back out to the left and image on the right fades out.
5) Next slide loads and same thing for five slides.

If I leave the slideshow in Auto mode, with no next/previous buttons, it works fine.

The script is set up so when you click the next/previous buttons, the peekaboo text will automatically hide itself before the next slide loads. I want the image on the right (that faded in) to also automatically hide itself when the next/previous buttons are clicked.

Right now, if you click the next/previous buttons, the image on the right will continue to fade out while the next slide is loading. Then after the next slide loads, the timing of the fade in on the image is off.

I hope that makes a little more sense.

Update: Here's a link to what I have so far.

[jscheuer1]

I think I see the problem. I'm not sure of the solution. I think you may need a:

jQuery('#extraEffect').stop(true).hide(0);

or a:

jQuery('#extraEffect').stop(true, true).hide(0);

See:

http://api.jquery.com/stop/

I'd try putting that in the blank line in the first code block from your first post:

if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
			clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
			slideshow.showhidedescpanel('hide', 0) //and hide it immediately
			//stop code would go here
		}

Also check out clearQueue:

http://api.jquery.com/clearQueue/

[Darkhorse]

John, you are the man. Both of your suggestions work like a charm. Thanks a bunch.