PDA

View Full Version : User contol of slideshow speed



scameron
11-17-2010, 10:29 PM
1) Ultimate Fade-in slideshow (v2.4)

2) http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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
11-18-2010, 02:51 PM
<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
11-19-2010, 01:24 AM
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
11-19-2010, 07:11 AM
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.