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

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Adding a play/pause button to a pre-existing slider script. (http://www.codingforums.com/showthread.php?t=286162)

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.

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()"/>

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?

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.