Printable View
Is there a way within the current structure of this tool, to set it up, so that if I select a number on my page and have it to go to that slide. I am trying to do this with the minimum amount of chnage on the existing code, but not sure how to make it work. So any help would be appreciated. Thanks.
There are various ways. Here's one (no need to change the main script):
I also have a version that automatically generates the stop, go, and number buttons. It would be good if you have tons of images, but a little harder to customize as to look and feel. Let me know if you're interested in it.Code:<!DOCTYPE html>
<html>
<head>
<title>Ultimate Fade In Slideshow w/numbered buttons, stop and go</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#controls {
width: 250px;
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.1/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">
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:'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;
this.nav = function(num){
this.navigate(num);
};
this.stop = function(){
this.navigate(this.setting.imgindex);
};
this.resume = function(){
if(dm.type!=='auto'){
dm.type='auto';
this.showslide('next');
}
};
}
});
</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.resume();" value="Go">
<span id="fadeshow1toggler"><span class="status"></span>
<input type="button" class="prev" value="<">
<input type="button" class="next" value=">">
</span>
</div>
</body>
</html>
Oh, and by the way:
In the future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:
Please include a link to the DD script(s) in question in your post. See this post for more information.
I was just wondering if there were a way to change the color of the buttons based on the slide that was currently displayed?
If tried an if statement but it always thinks the index is 1.
Thanks!
Quote:
Originally Posted by Speed153
Please post a link to a page on your site that contains the problematic code so we can check it out.
Here's the html for it:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [700, 232], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["001.jpg", "", "", "Sample Description."],
["002.jpg", "http://www.google.ca", "_new", "Google it!"],
["003.jpg"],
["004.jpg"],
["005.jpg", "", "", "Blah, Blah, Blech."] //<--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;
this.nav = function(num){
this.navigate(num);
};
},
onslide:function(curimage, index){
if (index = 0) {
document.getElementById("image0").innerHTML = "<img id='image0' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
}
else if (index = 1) {
document.getElementById("image0").innerHTML = "<img id='image0' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
}
else if (index = 2) {
document.getElementById("image0").innerHTML = "<img id='image0' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
}
else if (index = 3) {
document.getElementById("image0").innerHTML = "<img id='image0' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
}
else if (index = 4) {
document.getElementById("image0").innerHTML = "<img id='image0' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
}
});
</script>
<link href="slideshow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fadeshow1toggler">
<div id="previous"><a href="#" class="prev"><img src="prev.png" style="border-width:0" /></a></div>
<div id="nextone" align="right"><a href="#" class="next"><img src="next.png" style="border-width:0" /></a></div>
<div id="fadeshow1"></div>
<div id="promonav" align="right">
<div id="image0">
</div
</div>
<div id="info2"></div>
</div>
</body>
</html>
That's not at all how I would go about it. But if you do, you need to test for the index (if (index == 0)), not set it (if (index = 0)). And you can't have the division with the images in it and the the first image in it both having the same id (image0).
Anyways, this works (changes to the markup and the on page script code):
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [700, 232], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["001.jpg", "", "", "Sample Description."],
["002.jpg", "http://www.google.ca", "_new", "Google it!"],
["003.jpg"],
["004.jpg"],
["005.jpg", "", "", "Blah, Blah, Blech."] //<--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 actbut = 'restore.png', normbut = 'imgSEL.png', $ = jQuery, $imDiv = $('#images'), $buts, ss = this, gs = ss.setting;
$.each(gs.imagearray, function(i){
$('<img id="image' + i + '" data-index="' + i + '" src="' + (i == gs.curimage? actbut : normbut) + '" alt="" />')
.appendTo($imDiv).click(function(){
clearTimeout(ss.buttimer);
this.src = actbut;
$buts.not(this).attr('src', normbut);
ss.navigate(this.getAttribute('data-index'))
});
});
$buts = $imDiv.find('img');
gs.$next.add(gs.$prev).click(function(){
clearTimeout(ss.buttimer);
var $but = $('#image' + gs.curimage);
$but.attr('src', actbut);
$buts.not($but).attr('src', normbut);
});
gs.$wrapperdiv.mouseenter(function(){
clearTimeout(ss.buttimer);
ss.waspaused = true;
});
gs.onslide = function(curimage, index){
if(gs.displaymode.type === 'auto'){
ss.buttimer = setTimeout(function(){
var next = '#image' + ((index + (ss.waspaused? 0 : 1)) % gs.imagearray.length);
if(ss.waspaused){
ss.waspaused = false;
gs.onslide(curimage, index);
}
$buts.not(next).attr('src', normbut).end().filter(next).attr('src', actbut);
}, ss.waspaused? 0 : gs.displaymode.pause);
}
};
}
});
</script>
<link href="slideshow.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#images img{
width: 10px;
height: 10px;
padding: 4px;
cursor: pointer;
}
#images {
background-color: black;
}
</style>
</head>
<body>
<div id="fadeshow1toggler">
<div id="previous"><a href="#" class="prev"><img src="prev.png" style="border-width:0" /></a></div>
<div id="nextone" align="right"><a href="#" class="next"><img src="next.png" style="border-width:0" /></a></div>
<div id="fadeshow1"></div>
<div id="promonav" align="right">
<div id="images"></div>
</div>
<div id="info2"></div>
</div>
</body>
</html>
I also trying to use this script since couple of weeks but I could not success.
Here is the sample of my site where I pasted the above script
http://************/test.php
Thanks so much jscheuer1 for the code! It works great!! Definitly a much better way to go about it that what I was trying.
Thank you for this jscheuer!! Using your code as a base, what add'l code would would be required to automatically resume the 'play' mode, after a few seconds following a click? ie. instead of it stopping.Quote:
Originally Posted by jscheuer1
peace,
Joshua :)
If you mean this code:
Then:Code:oninit: function(){
var dm = this.setting.displaymode;
this.nav = function(num){
this.navigate(num);
};
this.stop = function(){
this.navigate(this.setting.imgindex);
};
this.resume = function(){
if(dm.type!=='auto'){
dm.type='auto';
this.showslide('next');
}
};
}
Code:oninit: function(){
var dm = this.setting.displaymode, tmpType;
this.nav = function(num){
tmpType = dm.type;
this.navigate(num);
dm.type = tmpType;
};
this.stop = function(){
this.navigate(this.setting.imgindex);
};
this.resume = function(){
if(dm.type!=='auto'){
dm.type='auto';
this.showslide('next');
}
};
}
this is outstanding. Thank you John!!