PDA

View Full Version : Thumbnail control for Ultimate Fade-in slideshow (v2.1)



eqmedia
12-21-2009, 04:22 PM
1) Script Title:
Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:
I wish to create navigational controls that allow the user to move between slides by clicking a thumbnail.

You currently have a "Prev" and "Next" buttons, so I hope you can have a thumbnail button for each image.

I've also seen a Thumbnail hack to select different galleries, but this is not what I want.

Nile
12-21-2009, 04:25 PM
Would something like this be OK: http://www.dynamicdrive.com/dynamicindex4/frogjs/index.htm

jscheuer1
12-21-2009, 05:12 PM
Nile, I wish you would quit pushing that Frog. It's not modular and has serious problems in Opera and IE 8.

Anyways, try out this demo. It can be made to do what you want:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#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.3.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://stickmanlabs.com/images/kevin_vegas.jpg"],
["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>

Any questions, feel free to ask.

eqmedia
12-21-2009, 05:27 PM
Wow! That's great!

Exactly what I was after.

From this code I can configure it with thumbnails.

PS. Frog wasn't what I wan't but thanks all the same. :)