Ultimate Fade-in slideshow - Pause when thumb selected

[easycoder]

1) Script Title: Ultimate Fade-in slideshow - Pause when thumb selected

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js

3) Describe problem: When user selects a slide to view, the show pauses, but toggle button does not change from Play to Pause image.

Instead of "Prev" and "Next" nav buttons, my client wanted to display thumbnails of each slide so user can click on the desired image to fade/view it.
That works great, but when a specific slide is selected (by its index in the array), a) the slide show PAUSES (was not expecting that), and b) even though the show has STOPPED, the "Play" button image is still displayed (which is confusing), and the user has to click it TWICE--once to get it to toggle from the Pause button to the Play button, and one more time to get it to actually START PLAYING again.

Also, there was not documentation at all referring to the ability to select a slide by its index #. I had to look through the code to see that indeed, this can be done. It would be helpful to add documentation and an example of how to implement this type of behavior.

Sorry to post two help requests on this for my first two ever posts on this forum! I like this fade/slideshow much better than the one I was told to use by my client (that one was chock full of bugs and had a terrible glitch that I could not find/fix). :-)

[jscheuer1]

See:

http://www.dynamicdrive.com/forums/blog.php?b=248

Any questions, ask them in this thread.

[easycoder]

Hi, John. Thanks for your reply. Have you seen my first thread (http://www.dynamicdrive.com/forums/showthread.php?t=67568)? That's the one that I really need help with right now, as it's a "must have" feature with this client. Sure could use some help figuring out why my code is not changing the image dimensions.

Back to this thread... I'm still stuck. :-(

To clarify what I'm doing here: I modified my script to display thumbnail images along the bottom, and added the following code to mygallery get them to trigger slide selection:
---------------------------------------------------------
onslide:function(curimage, index){
var imagearray=this.setting.imagearray
jQuery('#slidedesc').html(imagearray[index][3])
}

---------------------------------------------------------

The HTML for my thumnails looks like this:
<a href='#' onclick=\"mygallery.navigate($i);return false;\"><img src=\"$thumb\" /></a>
($i is a PHP variable that's the loop index, my images are coming from a CMS)

This is my play/pause button code (note that I am using images, not input/button):
---------------------------------------------------------
<div id='toggler'>
<a href='#' id='playbutton' onclick="var dm=mygallery.setting.displaymode;if(dm.type!==''){dm.type='auto';mygallery.showslide('next');}return false;">
<img src='images/play.png' alt='play button' class='toggler' title='Play' />
</a>
<a href='#' id='pausebutton' onclick="mygallery.navigate(mygallery.setting.imgindex);return false;">
<img src='images/pause.png' alt='pause button' class='toggler' title='Pause' />
</a>
</div>
---------------------------------------------------------

It works great. The only problem is that selecting a specific slide image causes the slideshow to pause, and the play/pause buttons do not toggle to indicate that the show has been paussed (I'd rather it not pause, but client has not responded as to what they want it to do).

When I include the extrabuttons.js script in my script, it breaks the slideshow. I don't get any javascript errors. It just doesn't work.
I added the extrabuttons option code from your Garden example script--that does not cause any problems, but also doesn't do anything.

[easycoder]

Figured it out myself.