Pause jmpress slideshow

[Cloudinnovates]

I am using ( http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/ ) jmpress slideshow to autoplay impressjs.

How can I add onClick event on the following script below ?

 <script type="text/javascript">
       $(function() {

    var jmpressOpts = {
        animation       : { transitionDuration : '1.8s' }
    };

    $( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
        autoplay    : true,
        bgColorSpeed: '1.8s',
        arrows      : false
    }));

});
  </script>

I am trying to create something similar to this http://landing.identitymind.com/detective-story/

Where the user have the choice to enable or disable autoplay and sound

Please Advice

[sokra]

They ( http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/ ) have some custom autoplay code (see post, look for "setTimeout").

Use jQuery to get onClick events (as usual) (http://api.jquery.com/click/).

The detective story (http://landing.identitymind.com/detective-story/) is not using jmpress-slideshow, but only jmpress.

[Cloudinnovates]

Thanks sokra for your help. As I am new to jquery. I am struggling with the coding. I do know the detective story purely users jmpress. Onclick event I would like user to play and stop the slideshow. The slide acts like a video player. Below is what I did but it is not helping.

    <script type="text/javascript">
    $(function() {

        var jmpressOpts = {
            animation       : { transitionDuration : '1.0s' }
        };

        $( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
            autoplay    : false,
            bgColorSpeed: '1.0s',
            arrows      : false
        }));
    });
    $("button").click(function() {
        this.slideshow  = setTimeout( function() {

                    _self.$jmsWrapper.jmpress( 'next' );

                    if( _self.options.autoplay =false ) {

                        _self._startSlideshow();

                    }

                }, this.options.interval );
    }); 
 </script>

Please Advice Thank You :)

[sokra]

Cannot see how this should work... Seems like you just copied the code from the post. this and _self isn't defined anywhere. Try to read and understand the code and text in the post.

Maybe this will work:

$("button").click(function() {
  var jmslideshow = $( '#jms-slideshow' ).data("jmslideshow");
  if(jmslideshow.options.autoplay) {
    jmslideshow._stopSlideshow();
  } else {
    jmslideshow.options.autoplay = true;
    jmslideshow._startSlideshow();
  }
  return false;
});

[Cloudinnovates]

Thanks sokra. This work for me. Taken noted on your advice. Thanks once again.