Search code examples
javascriptjqueryslideshowcyclekeycode

jquery cycle slideshow, with keycode navigation


I'm using a slideshow on my website using jquery Cycle 1. I navigate into my slideshow with #next function. when clicking on my last slide of my slideshow it redirect me to another page (var random_next_url_enfant).

I would like to add the spacebar and the right arrow key to navigation inside my slideshow. when I add this Js code it works, but on the last slide it starts the slideshow again instead of redirecting me to the next page.

$(document.documentElement).keyup(function (e) {
        if (e.keyCode == 39)
        {        
        $('#slider_projets').cycle('next');
        }
        });

here is my full code using the mouse click. on the last slide, it redirects me to another page, it works perfectly. but I would like to get the same with the spacebar and the right arrow :

$('#slider_projets').cycle({
            speed:    600, //temps d'animation
            timeout:  0, //fréquence
            fx: 'scrollLeft',
            //compteur//
            pager: "#nav",
            after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
                $('#counter_1').text((options.currSlide + 1) + ' / ' + (options.slideCount));
                slideIndex = options.currSlide;
                nextIndex = slideIndex + 1;
                prevIndex = slideIndex - 1;
                if (slideIndex == options.slideCount - 1) {
                    /*nextIndex = 0;*/
                    var random_next_url_enfant = $("#random_next_url_enfant").val();
                    $('#next').on("click", function(e){
                        e.preventDefault();

                        window.location = random_next_url_enfant;
                    });
                }

                if (slideIndex === 0) {
                    prevIndex = options.slideCount - 1;
                }

            }

        });

I think i'm missing something but I can't find what !

here is a jsfiddle :

http://jsfiddle.net/8HsdG/

thanks a lot for your help,


Solution

  • @kkemple, I've resolved the problem... I just had to change :

    $(document.documentElement).keyup(function (e) {
            if (e.keyCode == 32)
    
            {        
           $('#slider_projets').cycle('next');
            }
            });
    

    by

    $(document.documentElement).keyup(function (e) {
            if (e.keyCode == 32)
    
            {        
           $("#next").trigger("click");
            }
            });
    

    and it works perfectly ! anyway thanks for your help !