Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Adding a play/pause button to a pre-existing slider script.

    Hello all, My name is Marcus and I am new to this so please forgive my ignorance.

    I recently put up a webpage using this online demo/tutorial http://tympanus.net/Tutorials/Elasti...how/index.html

    I decided to go with "Demo 2" (with autoplay). Everything worked perfectly but now I would like to add a pause/play button to the slider interface.

    Looking at http://tympanus.net/Tutorials/Elasti...eislideshow.js
    lines 343 to 351 includes an if statement featuring
    clearTimeout( _self.slideshow );
    _self.options.autoplay = false;

    this seems to be the key to shutting off the autoplay when the user clicks a thumbnail.

    I would like someone to show me how to write a function that can be attached to a button which will pause the slide show by setting "_self.options.autoplay = false;" then turn it on again by changing the value back to true (assuming the show was already in a paused state).

    If it isn't asking to much I would be grateful if you could please show me the following:
    1. how the whole function should look
    2. where exactly to paste the function into my page
    3. an example of the button code that is required to id the button as the play pause toggle.

    Thank you very much for taking the time to help me out on this. It is very much appreciated.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    you need a global variable oop

    Code:
             var oop=[];
                $(function() {
                    $('#ei-slider').eislideshow({
    					animation			: 'center',
    					autoplay			: true,
    					slideshow_interval	: 3000,
    					titlesFactor		: 0
                    });
                });
    Code:
    		_init 				: function( options ) {
    
    			this.options 		= $.extend( true, {}, $.Slideshow.defaults, options );
    
    			// set the opacity of the title elements and the image items
    			this.$imgItems.css( 'opacity', 0 );
    			this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 );
    
    			// index of current visible slider
    			this.current		= 0;
    
    			var _self			= this;
                 oop.push(this);
    			// preload images
    			// add loading status
    			this.$loading		= $('<div class="ei-slider-loading">Loading</div>').prependTo( _self.$el );
    
    			$.when( this._preloadImages() ).done( function() {
    
    				// hide loading status
    				_self.$loading.hide();
    
    				// calculate size and position for each image
    				_self._setImagesSize();
    
    				// configure thumbs container
    				_self._initThumbs();
    
    				// show first
    				_self.$imgItems.eq( _self.current ).css({
    					'opacity' 	: 1,
    					'z-index'	: 10
    				}).show().find('div.ei-title > *').css( 'opacity', 1 );
    
    				// if autoplay is true
    				if( _self.options.autoplay ) {
    
    					_self._startSlideshow();
    
    				}
    
    				// initialize the events
    				_self._initEvents();
    
    			});
    
    		},
    then

    Code:
            <input type="button" name="" value="Pause" onmouseup="clearTimeout(oop[0].options.slideshow_interval);oop[0].options.autoplay=false;"/>
            <input type="button" name="" value="Start" onmouseup="oop[0].options.autoplay=true;oop[0]._startSlideshow()"/>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    3dmaker (01-23-2013)

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much Vic! It works. But, there is now another related issue.

    Perhaps you could assist me further?

    I posted my page here

    http://3dmaker.com/champion/new/

    and the js file is here http://3dmaker.com/champion/new/js/j...eislideshow.js

    As you can see the pause button allows one more slide to reveal before pausing, so the show pauses, but the desired slide isn't being paused.

    Best I can figure is the slideshow is really two functions first is a delay to display the slide for a specified interval, second is the animation of the slide off the stage. I guess this was done so the first slide displayed wouldn't just disappear on arrival to the page?

    I noticed that when play is clicked that the delay comes first then a new slide. I think this confirms my hypothesis, but I don't know what to do about it.

    Regarding the pause button, is it possible to stop any functions that have already been cued up before they trigger? And could the play function start the slideshow but skip the initial delay?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    3dmaker (01-23-2013)

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks for the link it was very interesting. But as I understand so little of the scripting I couldn't figure out how to fix my issue.


  •  

    Posting Permissions

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