jquery cycle slideshow, with keycode navigation

Question

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,

Answer 1

@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 !

Answer 2

You need access to your slider options outside of your slider, the reason you are not getting to the url is because there is no listener telling it to go there, only the click event.

Here is a jsfiddle that will get you very close, it has everything you need, you just have to fill in the blanks.

http://jsfiddle.net/kkemple/8HsdG/1/

I wrapped your code in an anonymous function so I could declare some scoped variables

(function () {
  var slideIndex, slideCount;

  // all of your code is here
})();

I then added a before call on your slider:

before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
     slideCount = options.slideCount;
},

then added the following code to your key events:

if ( slideIndex == slideCount ) {
  //redirect to random url
   e.preventDefault;
}