Ultimate Fade In Slideshow - User Controls Q

[smhjr]

First of all whomever designed this, thank you. I have been searching around for a good slideshow that I can customize and most of the flash slide shows you can get on the web have some element of crud.

This is also my first attempt at using any sort of javascript and I'm impressed how easy this is to use. On my first attempt I had the demo up and running on my site in less than a couple minutes.

1) Script Title: Ultimate Fade In Slideshow

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

3) Describe problem: I am wodering if there are (I don't know what to call them) "buttons" with commands to play, pause, and stop the slideshow. I would like to keep the slideshow persistently running, but if someone thinks its annoying I would like them to be able to turn it off. Or maybe if they see something they like they can pause it.

Has anyone created this? Know were I can find it?

I'm sorry I am such a novice, but I don't even know if this is hard or easy.

I assume something in the code below would need to be modified.

paginateinit:function($){
		var slideshow=this
		var setting=this.setting
		if (setting.togglerid){ //if toggler div defined
			setting.$togglerdiv=$("#"+setting.togglerid)
			setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
			setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
			setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
				var $target=$(this)
				slideshow.navigate($target.data('action'))
				e.preventDefault()
			})
			setting.$status=setting.$togglerdiv.find('.status')
		}
	},

[traq]

check out the documentation for the togglerid attribute (in the slideshow initiation script). It implies you can define manual controls, even if the slideshow is in automatic mode. I haven't tried it, but it seems it should work. Have a look and try it out!

Edit: It works. Once you click on a left/right button, the mode switches to manual. So, halfway there.
auto slideshow w/controls

Edit: ...and jscheuer provides the other half!

[jscheuer1]

What traq says is true, but those controls don't include stop and go.

That said, when I saw how robust this script (written by ddadmin) was, I was very impressed. There are, for lack of a better word, numerous 'hooks' that are available to do pretty much, if not all of what you are asking.

First of all, you understand that there can be numerous slide shows on a page and that each one (however many or only one) is defined by the variable used for each (from the demo page):

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/hei . . .

So given that, you can have a stop or pause button (it really amounts to the same thing):

<input type="button" onclick="mygallery.navigate(mygallery.setting.imgindex);" value="Stop">

and a go/resume button:

<input type="button" onclick="var dm=mygallery.setting.displaymode;if(dm.type!=='auto'){dm.type='auto';mygallery.showslide('next');}" value="Go">

Each of these can be setup in various ways (to get the 'look and feel' you may want), the critical parts are the onclick events. If used with an anchor link (an <a> tag), they should return false, ex (for stop):

<a href="#" onclick="mygallery.navigate(mygallery.setting.imgindex); return false;">Link Text or Image Tag</a>

The 'return false' simply prevents the link's href from firing, which wouldn't be good in some cases.

I understand from your post that all of this is rather new for you. That's why I've tried to explain it in terms that would make sense to you, that you could make use of.

But if you have any questions, feel free to ask.

[smhjr]

Funny how I didn't even think that pause and stop are the same thing. I guess I was visualizing DVD contorls. Although stop in that case would be more like turn off completely.

Anyway, jscheuer1, I would say that your explanation is good in that I can conceptualize what you are saying. It's just that this is a foreign language yet for me so even though I might get bits and pieces of what you are explaining, I definitely don't fully comprehend it.

This is me sort of thinking out loud... In my mind I thought the answer would be some sort of explanation of the right syntax to replace the prev and next commands inside the toggler id with stop and go commands. This way the left button could be stop and the right button could be go. I already created the new buttons. &

But then your explanation wasn't what I had in mind or at least it doesn't seem like it is to me maybe because this is a foreign language to me.

Are you able to explain to me where to copy and paste the code you provided? I did some searching in the javascript and didn't find code that seemed close enough for me to replace this with.

Or is there a way to just use the script that is basically in place and just change the prev and next to stop and go?

I really appreciate you helping and I am a pretty bright guy, but I'm only about 30 minutes into javascript at this point. I may need a little bit of hand holding on this.

In the meantime I am just going to see how bad I can break this thing by doing a little trial and error with what you provided.

[jscheuer1]

You don't really need the togglerid element if you are not using the prev/next buttons. What you can do is place a division after the slide show division like so:

<div id="fadeshow1"></div>
<div>
<a href="#" onclick="var dm=mygallery.setting.displaymode;if(dm.type!=='auto'){dm.type='auto';mygallery.showslide('next');}return false;"><img style="border-width: 0;" src="images/play.png" alt="" title="Play"></a> <a href="#" onclick="mygallery.navigate(mygallery.setting.imgindex);return false;"><img style="border-width: 0;" src="images/pause.png" alt="" title="Pause"></a>
</div>

[smhjr]

jscheuer1,

Thanks so much. It didn't seem like it should be that easy, but it was. I clicked one of your signature links too.