Question

我正在使用jcarousel来创建图库视图，并动态地将图像加载到jcarousel视图。我面临的问题是，我的jcarousel＆＃39;分页栏＆＃39;没有显示多个项目。即使我能够使用之前的＆＃39; ＆安培; ＆＃39;下一个＆＃39;纽扣。如果我制作＆＃39; li＆＃39;内容静态。

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

});

jcarousel动态内容的分页问题

1 个答案: