jcarousel動態內容的分頁問題

Question

我正在使用jcarousel創建圖片庫視圖，並動態地將圖像加載到jcarousel視圖。我面臨的問題是，我的jcarousel'分頁欄'沒有顯示多個項目。它總是顯示單個項目，即使我可以使用'previous'&'next'按鈕瀏覽項目。如果我將'li'內容設爲靜態，它工作正常。

<div class="jcarousel-wrapper"> 
    <div class="jcarousel" id="carousel"> 
     <ul></ul> 
    </div> 

    <a href="#" class="jcarousel-control-prev">&lsaquo;</a> 
    <a href="#" class="jcarousel-control-next">&rsaquo;</a> 

    <p class="jcarousel-pagination"></p> 

</div> 



$(document).on('pagebeforeshow',"#gallery", function() { 

configureJcarousel(); 

    var imagegallerycontent = ''; 

     var i=0; 
     var data = session.imagesdata; 
     $.each(data, function (index, data) { 
     i+=1; 
     var imgsrc = "data:image/png;base64," + data; 
     imagegallerycontent += '<li><img src="' + imgsrc + '"/></li>'; 
     }) 

    $('.jcarousel ul').empty().html(imagegallerycontent); 
    $('.jcarousel').jcarousel('reload'); 

}); 


function configureJcarousel() 
{ 

    $('.jcarousel') 
    .on('jcarousel:create jcarousel:reload', function() { 
     var element = $(this), 
      width = element.innerWidth(); 

     if (width > 900) { 
      width = width/3; 
     } else if (width > 600) { 
      width = width/2; 
     } 

     element.jcarousel('items').css('width', width + 'px'); 
    }) 
    .jcarousel({ 

    });  

    $('.jcarousel-control-prev').click(function() { 
    $('.jcarousel').jcarousel('scroll', '-=1'); 
    }); 

    $('.jcarousel-control-next').click(function() { 
    $('.jcarousel').jcarousel('scroll', '+=1'); 
    }); 

    $('.jcarousel-pagination') 
    .on('jcarouselpagination:active', 'a', function() { 
     $(this).addClass('active'); 
    }) 
    .on('jcarouselpagination:inactive', 'a', function() { 
     $(this).removeClass('active'); 
    }); 


    $('.jcarousel-pagination').jcarouselPagination({ 
     item: function(page) { 
      return '<a href="#' + page + '">' + page + '</a>'; 
     } 
    }); 

    $(window).resize();   


} 

Answer 1

我可以解決這個問題。

$(document).on('pagebeforeshow',"#gallery", function() { 

//configureJcarousel(); 

    var imagegallerycontent = ''; 

     var i=0; 
     var data = session.imagesdata; 
     $.each(data, function (index, data) { 
     i+=1; 
     var imgsrc = "data:image/png;base64," + data; 
     imagegallerycontent += '<li><img src="' + imgsrc + '"/></li>'; 
     }) 

    $('.jcarousel ul').empty().html(imagegallerycontent); 
    configureJcarousel(); 
    $('.jcarousel').jcarousel('reload'); 

});