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.

Answer 2

Try this instead:

$('body').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();
    });

Answer 3

I'm trying to fix this same problem of yours...

        var rootUrl = "http://www.sagmeisterwalsh.com";
    var images = [
    rootUrl+"/images/u_work/Aizone-11.jpg",
    rootUrl+"/images/u_work/Aizone-12.jpg",
    rootUrl+"/images/u_work/Aizone-13.jpg"

    ];

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


    var index = 0;
    var i = 1;


    $.backstretch(images[index], {
        fade: 750,
        duration: 4000
    });

     $('#next').click(function(x) {
        x.preventDefault(); 


             $.backstretch(images[i++], {
                fade: 750,
                duration: 4000

            });

         $('#output').html(function(i, val) { return val*1+1 });
    });


    $('#prev').click(function(x) {
        x.preventDefault();
           $.backstretch(images[i--], {
               fade: 750,
                duration: 4000
           });
     $('#output').html(function(i, val) { return val*1-1 });   

    });

Try this:

http://jsfiddle.net/XejZV/