View RSS Feed

jscheuer1

Extra Buttons for Ultimate Fade-in slideshow

Rate this Entry
The product of many requests as regards Ultimate Fade-in slide show (currently at v2.4, but should work for any Ultimate Fade-in slideshow in the 2.x series) for a button to do this or that, stop or go, pause/play, and individual numbered or thumbnail buttons with or without special effects, with onclick or onmouseover for these individual buttons. This script (right click and 'save as'):

extrabuttons.js

can do any or virtually all (some things you wouldn't want to combine in one slideshow) of these things. In fact, I combined more than anyone would probably want for the second demo:

Demo_1 - garden

Demo_2 - enhanced default show from script's demo page

To set it up on your page, download the extrabuttons.js script (see above), and add it's tag (highlighted) between fadeslideshow.js and the on page portion of the script (from the second demo):

Code:
<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", "", "", "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:2500, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	extrabuttons: {pause: 6000, pauseplay: true, pend: '.bob', nextprevresume: false, navfade: 0.65},
	navbut: '<a href="javascript:void(#%i)"><img src="images/buts/%c.gif" alt="%c" title="%c" /></a>',
	onpauseplayswitch: function(pauseplaybuts){
        	var ppstatus = this.setting.$togglerdiv.find('.pauseplaystatus');
		if(pauseplaybuts.hasClass('running')){
			ppstatus.html('running');
		} else {
			ppstatus.html('paused');
		}
	},
	togglerid: "fadeshow1toggler"
});
</script>
Configure some options (some examples highlighted in the above) and/or add some markup to the toggler division and you're all set.

To see the full source code of either demo, use your browser's 'view source'.

Here's usage instructions for the options and markup that can be used. It also describes two new callback functions and other features that may be utilized:

Extra Buttons Usage

Edit: Sept 4 2011 - add second demo, update script and usage instructions with extrabuttons.navbutonly property/option. Updated the version of fadeslideshow.js to one that actually uses the loading image. Preloaded the loading image on the demo pages. Updated fadeslideshow.js script available here (this may be updated further as the need arises - none of the changes are required for extrabuttons to work, they're just unofficial bug fixes):

fadeslideshow.js


Edit: Sept 9 2011 - update extrabuttons.js to run the onpauseplayswitch function (if valid and present) on init, remove hard coded value pause/play status from demos to better demonstrate use of this new code, change order of demos in this blog posting, label demos


Edit: Oct 27 2011 - update fadeslideshow.js for more bug fixes see bottom of:

http://www.dynamicdrive.com/forums/s...88&postcount=1

for more info. One spelling error corrected.


Comments are welcome but will be held back until I have a chance to check them for spam or requests for help. If you want help with this, please post in the forum and refer back to this blog entry. Use a title for your post that includes the word ExtraButtons.

I'm working on more demos, as they evolve, they will be posted here, and the extrabuttons.js script and usage details linked to above may be updated. Notes will be made to that effect.

Submit "Extra Buttons for Ultimate Fade-in slideshow" to del.icio.us Submit "Extra Buttons for Ultimate Fade-in slideshow" to StumbleUpon Submit "Extra Buttons for Ultimate Fade-in slideshow" to Google Submit "Extra Buttons for Ultimate Fade-in slideshow" to Digg

Updated 10-27-2011 at 05:22 PM by jscheuer1 (add info)

Categories
DD Scripts Mods , JavaScript & Ajax , Post a JavaScript

Comments