View Full Version : Ultimate slideshow play/pause button

10-20-2010, 04:30 PM
1) Script Title: Ultimate Fade-In slideshow

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

3) Describe problem:

working fine for me this script, i need to add play/pause button in above navigation. when i press pause sideshow would be stop and play button would visible and when i press play pause button would be visible and sideshow would run. any help??????



10-21-2010, 05:48 AM
Here's a Demo of the below code:


Add the highlighted as shown and use the toggle division shown or a variation on it (it's the class names in the toggle division, as in the original, that are important). Don't miss the added comma (red) after the togglerid value:

<!DOCTYPE html>
<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;
<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 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://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.resume = function(){
$pauseplay = $(tog + ' .pauseplay').click(function(e){
v = this.value? ['value', this.value] : ['innerHTML', this.innerHTML];
if(v[1] === pauseplay[0]){
this[v[0]] = pauseplay[1];
} else {
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];

<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;">

Notes: Notice this line:

var pauseplay = ['Pause', 'Play'], // set values/texts for pause play button/link in the form of ['value/text_for_Pause', 'value/text_for_Play']

In it you may configure the values/texts displayed for the Pause/Play button/link.

Any questions, feel free to ask.