Results 1 to 2 of 2

Thread: Ultimate slideshow play/pause button

  1. #1
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate slideshow play/pause button

    1) Script Title: Ultimate Fade-In slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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??????


    Regards

    Umesh

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here's a Demo of the below code:

    http://home.comcast.net/~jscheuer1/s.../pauseplay.htm

    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:

    Code:
    <!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>
    Notes: Notice this line:

    Code:
    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.
    Last edited by jscheuer1; 10-21-2010 at 07:45 AM. Reason: add demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •