User contol of slideshow speed

[scameron]

1) Ultimate Fade-in slideshow (v2.4)

2) http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) I am looking for a way to allow the user to speed up or slow down the speed of the slideshow. Can you help?

[jscheuer1]

<script type="text/javascript">
var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "#what", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false, minpause: 1000, maxpause: 7000},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler",
	oninit: function(){
		var s = this.setting.displaymode, $ = jQuery, sm = $('#thespeed').val(s.pause/1000 + ' sec');
		$('#slower').bind('click', function(e){
			e.preventDefault();
			if(s.pause < s.maxpause){
				s.pause += 500;
			}
			sm.val(s.pause/1000 + ' sec');
		});
		$('#faster').bind('click', function(e){
			e.preventDefault();
			if(s.pause > s.minpause){
				s.pause -= 500;
			}
			sm.val(s.pause/1000 + ' sec');
		});
	}
})
</script>

Don't miss the added comma (red) after the togglerid value.

<div id="fadeshow2"></div>

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a>  <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>

<div><input type="text" id="thespeed"><a href="#" id="faster">Faster</a> <a href="#" id="slower">Slower</a></div>

[scameron]

Many thanks, That's exactly what I was looking for.

The only change I made was to:

<input type="text" id="thespeed" size="7" readonly="readonly" STYLE="background-color: #FFFFFF;">

This element is only for display of the current speed, right?

[jscheuer1]

Yes. In fact, you may skip it entirely and use just the faster and slower links, which could be buttons or images, whatever you like.