backstretch next & previous buttons -

i'm using backstretch jquery cycle images on website. can images cycle fine, i'm trying add "next" , "previous" buttons, , can't them work.

when click on next button, nothing happens.

my next button looks this:

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

and i'm putting jquery code @ bottom of page before 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;      });      // index variable keep track of image 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 debug, this:

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

the backstretch call wrong.

instead of this:

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

i wanted this:

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

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

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