jscheuer1

SPECIAL NOTE:

Few of the links previously herein still went where they did (if anywhere) when this was first written. All necessary missing files and more can be downloaded in the current distribution archive:

extrabuttonsdistro.zip

Most recent additions - graceful integration with Ultimate Fade In Slideshow (2.6.1)'s new swipe feature, bug fixes to the original fadeslideshow.js script as noted in the included fadeslideshow.js file's comments section. Also included is the fadeslideshow_bug_fix_caption_resizing_and _imgfrommarkup_options.js file which in addition to the fixes, also has two new options. See it's comments section for what they do, or look here:

Code:

//March 7, 2016 Update to optionally have description heights change on the fly between slides if description content varies in height required
// to use, set fadslishow option resizedesc to 'animate' or 'css' (requires descriptions and descreveal)
// 'animate', 'css', or false (omit) - should differing sized descriptions get differing sized discription windows?
//  If so how (when applicable, deafaults to css except where animation would mean seeing a smoother transition, like descreveal 'always')

//March 7, 2016 Update for images, links and/or targets, and/or descriptions to optionally be set in the markup rather than in the imagearray
// to use this option, set imagearray to 'markup' and put the images in the wrapperid div element. Make any links to them as normal a tags
//  with optional target attributes. If the image has an a tag link or any valid element as a parent other than the wrapper, and that element
// has any text in it, that text will be the caption/description for that image.

If you want to use those, use the file in place of the fadeslideshow.js file.

The product of many requests as regards Ultimate Fade-in slide show (currently at v2.6.1, 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. This script (right click and 'save as'):

Removed by Comcast without warning, download above distro archive for files

can do any or virtually all (some of which you wouldn't want to combine in one slideshow) of these things (fortunately, you get to choose, as the script only adds options. No one feature must be used).

To set it up on your page, download the extrabuttonsdistro.zip archive (see top), and add the extrabuttons.js tag (highlighted) between fadeslideshow.js and the on page portion of the script:

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.

Or, just run the demo page (extrabuttons_demo.htm) in the extrabuttonsdistro.zip archive and work from there.


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:

Removed by Comcast without warning

Now available as extrabuttons_usage.htm in the extrabuttonsdistro.zip archive downloadable from the top of this blog entry.

Edit: Updated fadeslideshow.js file only for bug fixes/enhancements (other than extra buttons) see:

http://www.dynamicdrive.com/forums/s...020#post317020

for more info. This updated file is in the distro, so only concern yourself with this for explanations or if you only want bug fixes, not extra buttons.

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 (Dynamic Drive Scripts Help or Javascript section unless it obviously belongs elsewhere) and refer back to this blog entry. Please 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 (if possible), and the extrabuttons.js script and usage details linked to above may be updated. Notes will be made to that effect.