Play and Pause in BookBlock.js

Question

How to create play and pause functionality in bookblock.js.

below is my js function which is invoked on click of play/pause button. i am not able to pause(and again recycle) the slideshow using this function. what is wrong in this.

function playPauseSlide(obj) {        
    if (isPlay) {
        $(obj).find('i').removeClass('glyphicon-pause').addClass('glyphicon-play');            
        $('#bb-bookblock').bookblock({ autoplay: false });            
    } else {
        $(obj).find('i').removeClass('glyphicon-play').addClass('glyphicon-pause');
        $('#bb-bookblock').bookblock({ autoplay: true, interval: 1000 });            
    }
    isPlay = !isPlay;
}

Answer 1

after lots of trying i finally added play and pause functions in slide show by customizing the script.

jquery.bookblock.js

_pauseSlideshow: function () {        
    if ( this.options.autoplay ) {
        clearTimeout( this.slideshow );           
                    }
},

//// public method: pause the slide show
pause: function () {          
    this._pauseSlideshow();
},

//// public method: play again the paused slide show
playAgain: function () {            
    this.options.autoplay = true;
    this._navigate('next', this.$currentItem);
    this._startSlideshow();
},

In my view script

var config = {
    $bookBlock: $('#bb-bookblock'),
    $navNext: $('#nextPage'),
    $navPrev: $('#prevPage'),
    $navFirst: $('#bb-nav-first'),
    $navLast: $('#bb-nav-last'),
    $pause: $('#pause'),
    $playAgain: $('#playAgain'),
},

initEvents = function () {
    config.$pause.on('click touchstart', function () {
        config.$bookBlock.bookblock('pause');
        return false;
    });

    config.$playAgain.on('click touchstart', function () {
        config.$bookBlock.bookblock('playAgain');
        return false;
    });
});