PDA

View Full Version : Ultimate Fade-in slideshow (v2.1) to show a specific slide



3dudes
11-24-2009, 04:14 AM
1) Script Title: Ultimate Fade-in slideshow (v2.1)

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

3) Describe problem: I want to show a specific slide in the slide show when a user clicks on a link from a separate menu item. Any suggestions?

nburkha1
12-03-2009, 07:09 PM
Did you ever get a response to this post or figure this out. I need to be able to do the same thing. Thanks.

jscheuer1
12-04-2009, 05:30 AM
Give this demo a whirl:


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

nburkha1
12-05-2009, 08:47 PM
Hi John,

Thanks,

With your help and my somewhat knowledge of javascript, I was able to add this script to my actual Navigation by calling up the js onMouseover and still call up the click to go to a specific web page. Thanks so much.

Nina

andyjos
02-05-2010, 08:18 PM
Thanks for the great demo. However, there's a strange behavior in the way the next, prev buttoms work vs the go to specific slide buttoms work. When you click the prev or next buttons, it's stops the show. However, when you click the specific slide buttoms, it does not (or restarts it if the show is stopped). How do I fix this? Thanks in advance.