jCarousel infinity ajax load (browser compatibility?)

Dear all,

I tried to use jCarousel to create a sort of image display gallery, it will first load a few images and then load some more dynamically when clicking "next" or "prev". Everything work fine in clicking "next" but it acting weird when loading ajax in clicking "prev" in working in chrome and IE 8. I suspect the problem would be in the line

carousel.scroll(4, false);

Any ideas??

Here are my code:

function jcLoadCallBack(carousel, state) 
{
  // get book id
    var bibno = /b[0-9]{7}/.exec($('div.bibRecordLink > font').text());
    var currentFirstIndex = parseInt(carousel.list.children().first().attr('jcarouselindex'));
    var currentLastIndex = parseInt(carousel.list.children().last().attr('jcarouselindex'));
    if (state == 'init') {
        $.getJSON("/virtual_shelf/get/recordsbybib/bib/" + bibno, function(data) {
            for (i=0;i<data.length;i++) {
                var content = "<li><a href=\"http://xxx/record=" + data[i].bib + "\"><img border=0 id=\"" + data[i].id + "\" src=\"/bookcover.php?isxn=" + data[i].isxn + "\" call_no=\"" + data[i].call_no + "\" width=\"109\" height=\"160\" title=\"" + data[i].title + "\" /></a></li>";
                carousel.add(i, content);
            }
            carousel.size(data.length);
    // create image tool tip
            carousel.list.find('img[title]').tooltip();
        });
    }
    // 3 buffer images
    if (carousel.first <= 3 && state == 'prev') {
        var id = parseInt(carousel.list.children().first().find('img').attr('id'));
        $.getJSON("/virtual_shelf/get/recordsbyid/id/" + (id - 1), function(data) {
                var content = "<li><a href=\"http://xxx/record=" + data.bib + "\" ><img border=0 id=\"" + data.id + "\" src=\"/bookcover.php?isxn=" + data.isxn + "\" call_no=\"" + data.call_no + "\" width=\"109\" height=\"160\"title=\"" + data.title + "\" /></li></a>";
                carousel.add(currentFirstIndex-1, content);
                carousel.scroll(4, false); // **go back 1 step after creating image** before
                carousel.size(carousel.options.size+1);
                carousel.get(currentFirstIndex-1).find('img[title]').tooltip();
        });
    }
    // 3 buffer images
    if (carousel.first >= (currentLastIndex - 5) && state == 'next') {

        var id = parseInt(carousel.list.children().last().find('img').attr('id'));
        $.getJSON("/virtual_shelf/get/recordsbyid/id/" + (id + 1), function(data) {
                var content = "<li><a href=\"http://xxx/record=" + data.bib + "\"><img border=0 id=\"" + data.id + "\" src=\"/bookcover.php?isxn=" + data.isxn + "\" call_no=\"" + data.call_no + "\" width=\"109\" height=\"160\"title=\"testing\" /></a></li>";
                carousel.add(currentLastIndex+1, content);
                carousel.size(carousel.options.size+1);
                carousel.get(currentLastIndex+1).find('img[title]').tooltip();
        });
    }
}

$(document).ready(function() {
    $('#mycarousel').jcarousel({
        itemLoadCallback: jcLoadCallBack,
        visible: 5,
        scroll: 1,
        itemFallbackDimension : 109,
        start: 5
    });
});

This problem trouble me a lot for weeks, any idea is appreciated.

Thanks

ansaurus

tags:

views:

answers:

jCarousel infinity ajax load (browser compatibility?)

related questions