backstretch next & previous кнопки

Question

Я использую backquestch jquery для циклического перемещения изображений на моем сайте. Я могу заставить изображения циклически работать, но я пытаюсь добавить кнопки "следующий" и "предыдущий", и я не могу заставить их работать.

Когда я нажимаю на следующую кнопку, ничего не происходит.

Моя следующая кнопка выглядит так:

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

И я помещаю весь свой код jquery внизу страницы перед тегом закрытия тела.

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

Используя Firebug для отладки, я получаю это:

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

Answer 1

Обратный вызов был неверным.

Вместо этого:

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

Я хотел это:

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

Дело не в том, что кнопки next/prev не работали, а в том, что при первом вызове передавалось первое изображение, а не набор изображений.

Вторая строка (с паузой в ней) находится там, поэтому изображения не меняются автоматически, они меняются только тогда, когда я нажимаю кнопки "Следующая / Предыдущая".

Answer 2

Попробуйте это вместо этого:

$('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

Я пытаюсь решить ту же самую проблему твоего...

        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 });   

    });

Попробуй это:

http://jsfiddle.net/XejZV/