backstretch next & previous buttons

Question

I'm using the backstretch jquery to cycle images on my website. I can get the images to cycle fine, but I'm trying to add "next" and "previous" buttons, and I can't get them to work.

When I click on the next button, nothing happens.

My next button looks like this:

<a id="next" href="#"><img src="/images/arrow-right.png">

And I'm putting all my jquery code at the bottom of the page before the body close tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.backstretch.js"></script>
<script>
    var images = [
    "/images/backgrounds/Image01.jpg",
    "/images/backgrounds/Image02.jpg",
    "/images/backgrounds/Image03.jpg"
    ];

    $(images).each(function() {
       $('<img/>')[0].src = this; 
    });

    // The index variable will keep track of which image is currently showing
    var index = 0;

    $.backstretch(images[index], {speed: 500});

    $('#next').click(function(x) {
        x.preventDefault();
        $('body').data('backstretch').next();
    });
    $('#prev').click(function(x) {
        x.preventDefault();
        $('body').data('backstretch').prev();
    });
</script >

Using firebug to debug, I get this:

    TypeError: $(...).data(...) is undefined
    $('body').data('backstretch').next();

Answer 1

The backstretch call was wrong.

Instead of this:

    $.backstretch(images[index], {speed: 500});

I wanted this:

    $.backstretch(images, {speed: 500});
    $('body').data('backstretch').pause();

It's not that the next/prev buttons weren't working, it's that the initial call was passing the first image, not the set of images.

The second line (w/ pause in it) is there so the images don't change automatically, they only change when I hit the next/prev buttons.