Question

Morning folks. Have an issue with a simple jQuery gallery i’m making. It lets the user cycle through a collection of images via some buttons and at the same time, rotates through these images on a timer. My problem is that the user is able to click the button multiple times which queues up the fade in animation and repeats it over and over, e.g. user clicks button 5 times > same image fades in/out 5 times > gallery moves to next image.

I’ve tried using:

$('#homeGalleryImage li a').unbind('click');

After the click event is fired and then rebinding:

$('#homeGalleryImage li a').bind('click');

After it’s done but this simply removes the click event after pressing a button once and never rebinds to it?

I’ve also tried disabling the button via:

$('#homeGalleryImage li a').attr('disabled', true);

To no avail… ?

There is a secondary issue where if you manage to click a button while the image is in a transition, the next image appears ‘faded’ as if the opacity has been lowered? Very strange… Here is the code for button clicks:

var i = 1;
var timerVal = 3000;
$(function () {
    $("#homeGalleryControls li a").click(function () {
        var image = $(this).data('image');
        $('#galleryImage').fadeOut(0, function () {
            $('#galleryImage').attr("src", image);
        });
        $('#galleryImage').fadeIn('slow');
        $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
        $(this).find('img').attr("src", "/Content/Images/Design/btn_checked.gif");
        i = $(this).data('index') + 1;
        if (i == 4) {
            i = 0;
        }
        timerVal = 0;
    });
});

Here is the code that cycles through the images on a timer:

//Cycle through gallery images on a timer
window.setInterval(swapImage, timerVal);
function swapImage() {
    $('#galleryImage').fadeOut(0, function () {
        var imgArray = ["/Content/Images/Design/gallery placeholder.jpg", "/Content/Images/Design/1.jpg", "/Content/Images/Design/2.jpg", "/Content/Images/Design/3.jpg"];
        var image = imgArray[i];
        i++;

        if (i == 4) {
            i = 0;
        }

        $('#galleryImage').attr("src", image);
        $('#galleryImage').fadeIn('slow');
    });
    var currentButton = $('#homeGalleryControls li a img').get(i - 1);
    $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
    $(currentButton).attr("src", "/Content/Images/Design/btn_checked.gif");
}

I realise it might be a better idea to use a plugin but I’m very new to jQuery and I’d like to learn something rather than using some ready made code.

Any help at all, is much appreciated.

Thankyou

Answer 1

You could always try adding something to the element to cancel the click event?

For example

$(".element").click(function(e) {

    if ( $(this).hasClass("unclickable") ) {
        e.preventDefault();
    } else {

        $(this).addClass("unclickable");
        //Your code continues here
        //Remember to remove the unclickable class when you want it to run again.

    }

}):

In your case you could try adding a check on the click.

$('#homeGalleryImage li a').attr('data-disabled', "disabled");

Then inside your click event

if ( $(this).attr("data-disabled" == "disabled") {
  e.preventDefault();
} else {
  //Ready to go here
} 

Edit

Here is a working example showing the element becoming unclickable. http://jsfiddle.net/FmyFS/2/