Start/Stop button for Ultimate Fade-in slideshow (v2.4)

[Nightwing308]

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


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


3) Describe problem: I'm using two if the Ultimate Fade-in slideshow (v2.4) scripts on a page, and have both working perfectly (at least in IE 8 ...haven't tested on other browsers yet).
The first slide-show is set to "auto", so it can be viewed as soon as the page has finished loading. The second slide-show however, is set currently set to "manual" so it doesn't start immediately and people miss pictures there while viewing the first slide-show.

My question...is it possible to not only have a "prev" and "next" button, but also a "start" (or "auto") button in the navigation div, that would start the slideshow on demand, and actually change it from manual to auto?

Any help or advice would be greatly appreciated.

[jscheuer1]

Add this script to your page:

Attachment 4012

after the fadeslideshow.js and before your on page calls for the slideshows:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript" src="extrabuttons.js">

// Extra Buttons Script (c)2011 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// add on for Ultimate Fade In Slideshow
// username: jscheuer1 - This Notice Must Remain for Legal Use

</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //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", "", "<a style='color: #fff;' href='http://www.google.com/'>Nothing</a> beats relaxing next to the pool when the weather is hot."],
			["http://i29.tiny . . .

Now you can add a button, link, or image tag - whatever you like to the togglerid division with a class of resume and it will make a slideshow in manual mode go into auto mode:

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<input type="button" value="Go" class="resume">
<a href="#" class="prev"><img src="2.4/left.png" style="border-width:0" /></a>  <span class="status" style="marg . . .

One thing though you should set wraparound to true:

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:'manual', pause:4000, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

There's lots of other things you can do with this add on. But if all you want is a go button, that's all you need to do.

[Nightwing308]

Totally awsome John! Thank you soooo very much! This is exactly what I needed, and it works like a charm. You da MAN!!!

[glennnall]

Add this script to your page:

Attachment 4012

after the fadeslideshow.js and before your on page calls for the slideshows:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript" src="extrabuttons.js">

// Extra Buttons Script (c)2011 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// add on for Ultimate Fade In Slideshow
// username: jscheuer1 - This Notice Must Remain for Legal Use

</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //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", "", "<a style='color: #fff;' href='http://www.google.com/'>Nothing</a> beats relaxing next to the pool when the weather is hot."],
			["http://i29.tiny . . .

Now you can add a button, link, or image tag - whatever you like to the togglerid division with a class of resume and it will make a slideshow in manual mode go into auto mode:

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<input type="button" value="Go" class="resume">
<a href="#" class="prev"><img src="2.4/left.png" style="border-width:0" /></a>  <span class="status" style="marg . . .

One thing though you should set wraparound to true:

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:'manual', pause:4000, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

There's lots of other things you can do with this add on. But if all you want is a go button, that's all you need to do.

how can i make this Go button toggle Stop/Go, John?

[glennnall]

could anyone please tell me how i might make this button toggle between Stop and Go, or resume or whatever it is? i'm stuck with this script and have very little idea how to read javascript this advanced.

thanks again
GN

[jscheuer1]

Are you using Ultimate Fade or (as you seem to indicate in another thread) Swiss Army?

If you're using Ultimate Fade, grab the latest copy of extrabuttons.js from my blog entry:

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

Put two buttons or whatever in your toggler division. For example:

<div class="fadeshow1toggler">
<input type="button" class="pauseplay running" title="Pause" value="||">
<span style="display:none;"><input type="button" class="pauseplay paused" title="Play" value="►"></span>
<input type="button" class="prev" value="&lt;"> <span class="bob"></span>
<input type="button" class="next" value="&gt;"> &nbsp;<span class="status"></span><span class="pauseplaystatus"></span>
</div>

What's important is that they have the two classes as shown and that one of them be in a display none span, also as shown. It doesn't matter which is in that span, the script will sort it out for you.

For more information, see the blog entry linked to above, its demos and linked in Extra Buttons Usage file.

[glennnall]

Are you using Ultimate Fade or (as you seem to indicate in another thread) Swiss Army?

If you're using Ultimate Fade, grab the latest copy of extrabuttons.js from my blog entry:

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

Put two buttons or whatever in your toggler division. For example:

<div class="fadeshow1toggler">
<input type="button" class="pauseplay running" title="Pause" value="||">
<span style="display:none;"><input type="button" class="pauseplay paused" title="Play" value="►"></span>
<input type="button" class="prev" value="&lt;"> <span class="bob"></span>
<input type="button" class="next" value="&gt;"> &nbsp;<span class="status"></span><span class="pauseplaystatus"></span>
</div>

What's important is that they have the two classes as shown and that one of them be in a display none span, also as shown. It doesn't matter which is in that span, the script will sort it out for you.

For more information, see the blog entry linked to above, its demos and linked in Extra Buttons Usage file.

thanks, John - i was trying to use this to replace the button issues i was having with Swiss Army until you resolved that for me. "Desperate times..." and all that. thanks again for your help...