Использование плагина jQuery Cycle с плагином ScrollTo

Я использую плагин .cycle для циклического просмотра изображений. У меня есть настройка плагина scrollTo на моем пейджере. Он прокручивается с помощью функции .click, но не прокручивается во время цикла. Как заставить его прокручивать пейджер с каждым циклом?

        $(document).ready(init);

        function init() {
    var titles = ['1913', '1918', '1927', '1935', '1950', '1963', '1977', '1980', '1983', '1986', '1987', '1988', '1988-1999', '1990', '1992', '1993', '1993-1995', '1994', '1995', '1999', '1999', '2000', '2003', '2003', '2003', '2003', '2006', '2007-2008', '2011', '2011', '2013'];
    // dynamically add a div to hold the slideshow's pager
    $("#allCardContainer").before('<div id="pager"></div>');

    // now to use the cycle plugin
    $("#allCardContainer").cycle({
        pause: 1,
        pager: "#pager",
        pagerAnchorBuilder: function (index) {
            return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>';

        }

    });



    $(".scroll").click(function (event) {
        event.preventDefault();
        $('#allCardContainer').cycle('pause');
        $('#pager').scrollTo($(this), 1500, { axis: 'x', offset:-50 });
    });


}

Таким образом, код создает div пейджера, а затем циклически перебирает изображения. Вторая функция приостанавливает цикл и прокручивает пейджер влево. Как мне сделать так, чтобы эта прокрутка срабатывала в каждом цикле, чтобы мой выбранный div пейджера всегда находился в одном и том же месте и всегда был виден?

РЕДАКТИРОВАТЬ:

Если я попробую это, мой щелчок отлично работает, но пейджер не прокручивается во время цикла.

$(document).ready(init);

function init() {
    var titles = ['1913', '1918', '1927', '1935', '1950', '1963', '1977', '1980', '1983', '1986', '1987', '1988', '1988-1999', '1990', '1992', '1993', '1993-1995', '1994', '1995', '1999', '1999', '2000', '2003', '2003', '2003', '2003', '2006', '2007-2008', '2011', '2011', '2013'];
    // dynamically add a div to hold the slideshow's pager
    $("#allCardContainer").before('<div id="pager"></div>');

    // now to use the cycle plugin
    $("#allCardContainer").cycle({
        pause: 1,
        pager: "#pager",
        pagerAnchorBuilder: function (index) {
            return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>'; 
        },
        before: slideScroll(false)
    });

    function slideScroll(clicked) {
        if (clicked) {
            //$('#allCardContainer').cycle('pause');
            $('#pager').scrollTo($('.activeSlide'), 1500, { axis: 'x', offset: -83 });
        }
        else {
            $('#pager').scrollTo($('.activeSlide'), 1500, { axis: 'x', offset: -20 });
            alert('sliding');
        }
    }

    $(".scroll").click(function(event){        
        slideScroll(true);
    });
}

jquery scrollto cycle pager
person calorie712    schedule 01.10.2012    source источник
comment
Можете ли вы показать jsfiddle это в действии?   -  person jsweazy    schedule 01.10.2012

Ответы (1)


arrow_upward
0
arrow_downward

Вы будете делать то, что хотите, в варианте цикла до

// now to use the cycle plugin
$("#allCardContainer").cycle({
    pause: 1,
    pager: "#pager",
    pagerAnchorBuilder: function (index) {
        return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>';
    },
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
      // Do stuff here.
    }

});

http://jquery.malsup.com/cycle/options.html

РЕДАКТИРОВАТЬ:

Сделай это:

$(document).ready(init);

function init() {
  var titles = ['1913', '1918', '1927', '1935', '1950', '1963', '1977', '1980', '1983', '1986', '1987', '1988', '1988-1999', '1990', '1992', '1993', '1993-1995', '1994', '1995', '1999', '1999', '2000', '2003', '2003', '2003', '2003', '2006', '2007-2008', '2011', '2011', '2013'];
  // dynamically add a div to hold the slideshow's pager
  $("#allCardContainer").before('<div id="pager"></div>');

  // now to use the cycle plugin
  $("#allCardContainer").cycle({
    pause: 1,
    pager: "#pager",
    pagerAnchorBuilder: function (index) {
      return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>';
    },
    before: function() {
      if( $('.activeSlide').length > 0) {
        $("#pager").scrollTo($('.activeSlide'), 1500, { axis: 'x', offset:-50 });
      }
    }
  });

  $(".scroll").click(function(event) {
    event.preventDefault();
    $('#allCardContainer').cycle('pause');
    $('#pager').scrollTo($(this), 1500, { axis: 'x', offset:-50 });
  });
}

http://jsfiddle.net/xFMhA/

person jsweazy    schedule 01.10.2012
comment
Спасибо jSweazy, это сработало отлично. Одна проблема заключается в том, что теперь «до» срабатывает при каждом событии клика. Есть ли способ предотвратить это? - person calorie712; 01.10.2012
comment
Я приостанавливаю цикл в функции щелчка. - person calorie712; 01.10.2012
comment
Вы пытаетесь изменить способ его вращения. или вы пытаетесь что-то прокрутить, когда он вращается? Также можете выложить пример jsbin или что-то в этом роде. Если у меня есть ваш код для работы, я могу заставить его работать быстрее для вас. - person jsweazy; 01.10.2012
comment
jsfiddle: jsfiddle.net/xFMhA, но я не вижу, чтобы пейджер работал в jsfiddle. Изображение должно начать вращаться в этом поле, а активная ссылка на пейджер должна прокручиваться влево. Когда кто-то щелкает год на временной шкале, этот щелкнутый элемент должен прокручиваться влево в том же месте, и цикл должен приостанавливаться на неопределенный срок. - person calorie712; 01.10.2012
comment
Хорошо, к сожалению, сейчас нет времени смотреть. Я оглянусь позже с ответом о том, как заставить его работать - person jsweazy; 01.10.2012
comment
@jsweazy я смотрел на ваш ответ, потому что я пытался использовать цикл с scrollTo, и ваша скрипка jsfiddle.net/xFMhA не работала, потому что вы пытаетесь прокрутить до .activeSlide до того, как цикл сможет его определить ... так что вы получаете Uncaught TypeError - person David Chase; 26.04.2013