Log in

View Full Version : Ultimate slideshow play/pause toggle with image as a button


Wallan
01-13-2011, 11:25 AM
1) Script Title: Ultimate Fade-In slideshow

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

3) Describe problem:

Hi,

I have been looking at this thread: ( http://www.dynamicdrive.com/forums/showthread.php?t=58382 ) for help on how to create a fading slidwshow with a pause/play button that toggles. The example in this thread works - but I would like to have an image instead of the standard button in the example - and this is giving me some trouble.

This is the code I've been using (found in the other thread):

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#fadeshow1toggler {
width: 250px;
text-align: center;
}
#fadeshow1toggler .pauseplay {
width: 60px;
}
.status {
margin: 0 10px;
font-weight: bold;
}
</style>
<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: [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 pauseplay = ['Pause', 'Play'], // set values/texts for pause play button/link in the form of ['value/text_for_Pause', 'value/text_for_Play']
$ = jQuery, dm = this.setting.displaymode, ufObj = this, $pauseplay, v, tog = '#' + this.setting.togglerid;
this.stop = function(){
this.navigate(this.setting.imgindex);
};
this.resume = function(){
if(dm.type!=='auto'){
dm.type='auto';
this.showslide('next');
}
};
$pauseplay = $(tog + ' .pauseplay').click(function(e){
e.preventDefault();
v = this.value? ['value', this.value] : ['innerHTML', this.innerHTML];
if(v[1] === pauseplay[0]){
ufObj.stop();
this[v[0]] = pauseplay[1];
} else {
ufObj.resume();
this[v[0]] = pauseplay[0];
}
});
v = $pauseplay.get(0);
v = v.value? ['value', v.value] : ['innerHTML', v.innerHTML];
$(tog + ' .prev, ' + tog + ' .next').click(function(){
$pauseplay.get(0)[v[0]] = pauseplay[1];
});
}
});

</script>
</head>
<body>
<div id="fadeshow1"></div>
<div id="fadeshow1toggler">
<input type="button" class="pauseplay" value="Pause">
<!-- for alternate pause/play as link, comment out the above and uncomment the below -->
<!-- <a class="pauseplay" href="#">Pause</a> -->
<input type="button" class="prev" value="&lt;">
<span class="status"></span>
<input type="button" class="next" value="&gt;">
</div>
</body>
</html>

Here i thought to change the values into:

var pauseplay = ['<img src="pauseButton.png" />', '<img src="playButton.png" />'],

This gives me -This effect- (http://www.erikwallberg.se/DDexample/testpage2.htm). The link changes to my pause image, but wont switch to my play image or actually stop the slideshow.

However if i try this:

var pauseplay = ['pauseButton', '<img src="playButton.png" />'],
The function works, it pauses my slideshow and switches to and from my playbutton - but my pause image doesnt show - of course.

Example of this can be found here. (http://www.erikwallberg.se/DDexample/testpage.htm)

Why does this part work, var pauseplay = ['pauseButton', '<img src="playButton.png" />'], while placing an image at the 'pauseButton' location doesn't?

Or is there a much easier way to get it working while toggling between 2 images than the method I'm trying?
How would you create 2 toggling images as a play/pause button for a slideshow like this?

Thanks for any help in advance, this forum is a godsend.

Cheers,
Erik
azoomer
01-15-2011, 09:40 PM
Hi Erik,
take a look at this (http://azoomer.com/Erik/)
I think it does what you want.
The code is :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Ufis pause-play toggle</title>

<style type="text/css">
#pausebutton {
left: 114px;
margin-left:0px;
position:absolute;
}
#playbutton {
left: 114px;
margin-left:9999px;
position:absolute;
}
img {
border:none
}
</style>

<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.4- (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: "fadeshow", //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:2800, cycles:0, wraparound:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 600, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "toggler"
}) /* end fadeSlideShow */


jQuery(document).ready(function($){

$('#playbutton').click(function() {
$(this).css('margin-left', '-9999px');
$('#pausebutton').css('margin-left', 0);
});

$('#pausebutton').click(function() {
$(this).css('margin-left', '-9999px');
$('#playbutton').css('margin-left', 0);
});

});

</script>

</head>
<body>

<div id="fadeshow"></div>

<div id="toggler">
<a href="#" id="playbutton" onclick="var dm=mygallery.setting.displaymode;if(dm.type!==''){dm.type='auto';mygallery.showslide('next');}return false;"><img src="play.png" alt="play button" title="Play" /></a>

<a href="#" id="pausebutton" onclick="mygallery.navigate(mygallery.setting.imgindex);return false;"><img src="pause.png" alt="pause button" title="Pause" /></a>

</div><!-- end toggler -->

</body>
</html>

I found the code in an old folder on my pc, not sure how much of it is necessary, but it seems to work.