jQuery цикл плагин - Есть ли способ узнать, когда пейджер готов? - PullRequest
Новая
       36

jQuery цикл плагин - Есть ли способ узнать, когда пейджер готов?

1 голос
/ 08 марта 2012

Я пытаюсь использовать плагин Malsup jQuery Cycle с jCarousel , чтобы позволить миниатюрам в моей нумерации страниц прокручиваться по горизонтали, и она работает нормально.Проблема в том, что иногда плагин jcarousel не инициализируется, потому что я считаю, что нумерация страниц еще не готова.Мой код выглядит следующим образом: 

$('#slideshow').cycle({
    timeout : 0,
    speed   : 1000,
    pager   : '#image-carousel ul',
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="107" height="80" /></a></li>'; 
    }
});

$('#image-carousel').jcarousel();

Иногда, когда загрузка страницы jcarousel не работает, я использовал setTimeout, чтобы отложить инициализацию примерно на 2 секунды, и это работало каждый раз, поэтому я предполагаю, что иногдапейджер еще не готов.Сейчас я могу жить с решением setTimeout, но я думаю, что должен быть лучший способ справиться с этим.

1 Ответ

2 голосов
/ 08 марта 2012

Один из способов обойти это, если вам удобно изменять исходный код плагина цикла, вы можете включить обратный вызов с именем onPagerBuilt (или что-то еще), который будет запущен после построения пагинации.Измените функцию buildPager() в cycle.js следующим образом: 

function buildPager(els, opts) {
    var $p = $(opts.pager);
    $.each(els, function(i,o) {
        $.fn.cycle.createPagerAnchor(i,o,$p,els,opts);
    });
    opts.updateActivePagerLink(opts.pager, opts.startingSlide, opts.activePagerClass);

        // add this line
        if (typeof opts.onPagerBuilt == 'function') opts.onPagerBuilt();
};

Затем вы захотите добавить значение по умолчанию к $.fn.cycle.defaults где-то в этом списке: 

$.fn.cycle.defaults = {
  onPagerBuilt: null, // the callback to be run after pagination is built.

  // rest of the default options
  //...
}

Затемваш сценарий будет выглядеть так: 

$('#slideshow').cycle({
    timeout : 0,
    speed   : 1000,
    pager   : '#image-carousel ul',
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="107" height="80" /></a></li>'; 
    },
    onPagerBuilt: function () {
        $('#image-carousel').jcarousel();
    }
});
...