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

Question

Я пытаюсь использовать Malsup's jQuery Cycle plugin с 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, но я думаю, что должен быть лучший способ справиться с этим.

Answer 1

Один из способов обойти его, если вам удобно изменять исходный код плагина цикла, вы можете включить обратный вызов под названием 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(); 
    } 
});