I have a slideshow which has quick links to the specific slides. The slideshow then continues from that point. The trouble is if I double click on a quick link - when the slideshow continues it skips a slide (if I treble click it skips 2).

I think it's actually a problem with clicking again while the functions are running that's causing the problem as you can achieve the same problem by quickly clicking on other links while the functions are running.

Here's the code I have...

var images=new Array();
var locationToRevealCount=6;
var nextimage=2;
var t;
var doubleclick;

addIcons();

function addIcons() {
    while (locationToRevealCount>0) {
        $("#extraImageButtons").append('<img class="galleryButtons" src=".png" alt="'+locationToRevealCount+'" />');
        images[locationToRevealCount]='/'+locationToRevealCount+'a.jpg';
        locationToRevealCount--;
    };
    $('.homeLeadContent').prepend('<img class="backgroundImage" src=".jpg" />');
    $("#extraImageButtons img.galleryButtons[alt*='1']").attr("src",".png");
    runSlides();
}

function runSlides() {
    clearTimeout(t);
    t = setTimeout(doSlideshow,3000);
}

function doSlideshow() {
    if($('.backgroundImage').length!=0)
        $('.backgroundImage').fadeOut(500,function() {
            $('.backgroundImage').remove();
            slideshowFadeIn();
        });
    else
        slideshowFadeIn();
}

function slideshowFadeIn() {
    if(nextimage>=images.length) 
        nextimage=1;

    $("#extraImageButtons img.galleryButtons").attr("src",".png");
    $("#extraImageButtons img.galleryButtons[alt*='"+nextimage+"']").attr("src",".png");

    $('.homeLeadContent').prepend($('<img class="backgroundImage" src="'+images[nextimage]+'" style="display:none;">').fadeIn(500,function() {
        nextimage++;
        runSlides();

    }));
}

$("#extraImageButtons img.galleryButtons").live('click', function() {
    nextimage=$(this).attr("alt");
    $("#extraImageButtons img.galleryButtons").attr("src",".png");
    $(this).attr("src",".png");
    clearTimeout(t);
    doSlideshow();
});

...

<div class="homeLeadContent" style="width:965px;"></div>

<div id="extraImageButtons"></div>

I have a slideshow which has quick links to the specific slides. The slideshow then continues from that point. The trouble is if I double click on a quick link - when the slideshow continues it skips a slide (if I treble click it skips 2).

I think it's actually a problem with clicking again while the functions are running that's causing the problem as you can achieve the same problem by quickly clicking on other links while the functions are running.

Here's the code I have...

var images=new Array();
var locationToRevealCount=6;
var nextimage=2;
var t;
var doubleclick;

addIcons();

function addIcons() {
    while (locationToRevealCount>0) {
        $("#extraImageButtons").append('<img class="galleryButtons" src="http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png" alt="'+locationToRevealCount+'" />');
        images[locationToRevealCount]='http://www.tombrennand/'+locationToRevealCount+'a.jpg';
        locationToRevealCount--;
    };
    $('.homeLeadContent').prepend('<img class="backgroundImage" src="http://www.tombrennand/1a.jpg" />');
    $("#extraImageButtons img.galleryButtons[alt*='1']").attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
    runSlides();
}

function runSlides() {
    clearTimeout(t);
    t = setTimeout(doSlideshow,3000);
}

function doSlideshow() {
    if($('.backgroundImage').length!=0)
        $('.backgroundImage').fadeOut(500,function() {
            $('.backgroundImage').remove();
            slideshowFadeIn();
        });
    else
        slideshowFadeIn();
}

function slideshowFadeIn() {
    if(nextimage>=images.length) 
        nextimage=1;

    $("#extraImageButtons img.galleryButtons").attr("src","http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
    $("#extraImageButtons img.galleryButtons[alt*='"+nextimage+"']").attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");

    $('.homeLeadContent').prepend($('<img class="backgroundImage" src="'+images[nextimage]+'" style="display:none;">').fadeIn(500,function() {
        nextimage++;
        runSlides();

    }));
}

$("#extraImageButtons img.galleryButtons").live('click', function() {
    nextimage=$(this).attr("alt");
    $("#extraImageButtons img.galleryButtons").attr("src","http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
    $(this).attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
    clearTimeout(t);
    doSlideshow();
});

...

<div class="homeLeadContent" style="width:965px;"></div>

<div id="extraImageButtons"></div>

• javascript
• jquery
• double-click

2 Answers 2

Double click still fires two single click events... well almost all the time, depending on the browser (see: Javascript Madness: Mouse Events). This is why most remend implement either single click or double click events but not both.

If you want to detect double clicks at the same time you'll need to get into timing click events proximity to each other and preventing the second, reverting the first, and calling a double click event instead.

It sounds like you don't actually need double clicks though? Just the ability to -when clicking on a slide link- switch to that slide instead of forwarding to the next slide?

If you want to plete disable doubleclick:

jQuery('.dblClickDisabled').bind('dblclick',function(e){
    e.preventDefault();
})

Where .dblClickDisabled is the DOM-element that you want to disable double-click on.

If you aren't going to use a double click event, just put a timer to prevent a double click. This answer might be what you are looking for: How can jQuery be used to handle timer in click, dblclick separation