Numbering navigation on fadeslideshow

**pl4y312** · 08-01-2011, 03:41 AM

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

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

3) Describe problem: Numbering Navigation

I'm wondering is there possible to create numbering navigation in this script?
the example is in this navigation script >> http://www.dynamicdrive.com/dynamici...ucentslide.htm

**jscheuer1** · 08-01-2011, 06:33 AM

Here's one way:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ultimate Fade In Slideshow - Buttons Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* All Styles Optional */
#fadeshow1 .gallerylayer {
	background-color: green!important;
}
#controls {
	width: 468px;
	text-align: center;
}
.status {
	margin: 0 10px;
	font-weight: bold;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.1- (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">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [468, 500], //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:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "fadeshow1toggler",
	oninit: function(){
		var dm = this.setting.displaymode, ufObj = this, defaultMode = dm.type;
		this.nav = function(num){
			this.navigate(num);
			if(typeof dm.timer !== 'undefined'){
				clearTimeout(dm.timer);
				}
			dm.timer = setTimeout(function(){
				if(defaultMode === 'auto' && dm.type !== 'auto'){
					dm.type = 'auto';
					ufObj.showslide('next');
					}
				}, dm.pause);
		};
		this.stop = function(){
			this.navigate(this.setting.imgindex);
			defaultMode = 'manual';
		};
		this.resume = function(){
			if(dm.type!=='auto'){
				dm.type='auto';
				this.showslide('next');
			}
			defaultMode = 'auto';
		};
	}
});

</script>
</head>
<body>
<div id="fadeshow1"></div>
<div id="controls">
<input type="button" onclick="mygallery.stop();" value="Stop"><input type="button" onclick="mygallery.nav(0);" value="1"><input type="button" onclick="mygallery.nav(1);" value="2"><input type="button" onclick="mygallery.nav(2);" value="3"><input type="button" onclick="mygallery.nav(3);" value="4"><input type="button" onclick="mygallery.nav(4);" value="5"><input type="button" onclick="mygallery.resume();" value="Go">
<span id="fadeshow1toggler"><span class="status"></span>
<input type="button" class="prev" value="&lt;">
<input type="button" class="next" value="&gt;">
</span>
</div>
</body>
</html>

I also have a method for auto generating these buttons. For a long set of images, coding all the buttons can be tedious. Let me know if you're interested in that.

In either version (the code above or the one I just mentioned) you may use img tags instead of button tags for greater customization.

**fxr** · 08-23-2011, 04:29 PM

This works great. I was wondering if there is a way for the nav to stay highlighted for the image that is showing. Ex if Image 3 is showing have the 3rd button be highlighted. Also is there a way to add a mouseover on it. Thanks.

**fxr** · 08-24-2011, 08:46 PM

Ok I figured out how to add a mouseover using css

By using
input:hover

Still trying to figure out how to allow the nav to stay highlighted while its selected

**jscheuer1** · 08-31-2011, 12:23 AM

See my recent blog entry:

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

Thread: Numbering navigation on fadeslideshow

Thread Tools

Search Thread

Numbering navigation on fadeslideshow

Bookmarks

Bookmarks

Posting Permissions