PDA

View Full Version : 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/dynamicindex14/fadeinslideshow.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/dynamicindex14/translucentslide.htm

jscheuer1
08-01-2011, 06:33 AM
Here's one way:


<!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