CODEWITHSUNDEEP
jqueryslideshow
System-x32z
System-x32z

Reputation: 1971

Jquery - slideshow buttons function code

I have this very simple slideshow here: fiddle
Jquery codes:

$("#slideshow > div:gt(0)").hide();

var maxindex = $('#slideshow > div').length;

var index = 0
var interval = 3 * 1000; // 3 seconds
var timerJob = setInterval(traverseSlideShow, interval);

function traverseSlideShow() {
    console.log("current index: " + index);

    $('#slideshow > div')
        .stop()
        .fadeOut(1000);
    $('#slideshow > div').eq(index)
        .stop()
        .fadeIn(1000);

    $('ul li').removeClass('active');
    $('ul li:eq(' + index + ')').addClass('active');
    index = (index < maxindex - 1) ? index + 1 : 0;

}

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}

$(document).on('click', 'ul li', function () {
    index = $(this).index();
    traverseSlideShow();
    clearInterval(timerJob);
    timerJob = setInterval(traverseSlideShow, interval);
});

As you can see there's three buttons, on clicking any button the slideshow automatically goes to the photo related with the button you click, and you can see the style of this button changes(on click and after passing 3 seconds).
I have one problem with this code that I'm trying to fix.
Well, I'm trying to prevent clicking any button for one second after any button's style is changed, simple, if you click any button you can not re click another button within 1 second, and as well, if the slideshow automatically loads a photo you can not load any other photo by clicking any other button within 1 second.

Upvotes: 7

Views: 1318

Answers (3)

BMH
BMH

Reputation: 4340

I would add a flag as css class to the button:

Working fiddle: http://jsfiddle.net/b_m_h/Jtec5/86/

The flag is a .enable css class, only li with .enable is clickable.

The event only listens for click on ul li.enable:

...
$(document).on('click', 'ul li.enable', function () {
...

At first, all button should be clickable, so add .enable class for all li:

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + ' enable"></li>');
}

And add the mechanism to disable the li button and re-enable it after 1 second in the traverseSlideShow():

function traverseSlideShow() {
    ...
    $('ul li').removeClass('enable');
    setTimeout(function(){
        $('ul li').addClass('enable');
    }, 1000);
}

Upvotes: 5

Umm E Habiba Siddiqui
Umm E Habiba Siddiqui

Reputation: 594

try this,

(function(){
    $('button').on('click',function(){
    var $this=$(this);
            $this
                .attr('disabled','disabled');
                 setTimeout(function() {
                 $this.removeAttr('disabled');
                 }, 1000);
          });
     })();

Upvotes: 2

Smith Smithy
Smith Smithy

Reputation: 585

use setTimeout in a function where b is the id of the button to be delayed

function slow_button(b) {

    $('#' + b).attr("disabled", true);
    var t = setTimeout(function(){$('#' + b).removeAttr("disabled")}, 1000);
}

Upvotes: 1

Related Questions