[jQuery] Re: Trying to get jCarousel to fetch new set of records on click of Next button

Tue, 30 Jun 2009 06:58:08 -0700

load 6 on page load? when "Next" 3 move into place go get 3 more

expresso wrote: 
I've been trying for the last 2 days to get this thing to call my
getJSON and fetch a new set of records based on the carousel.last
value when you click the next button.  It loads 3 pictures on start up
just fine but the next button is not enabled because I only have 3
loaded and there are no more lingering in the queue.  I don't want any
lingering.

Check out this example, this is what I'm trying to do but instead
fetch the new set of images with my getJSON method:

http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_api.html

So here is my code but it's not working meaning I load 3 images and
the next button is not enabled.  Even when I load 4 images (to get the
next button to be clickable because I've loaded 4 images and it knows
there's another one in addition to the 3), it doesn't go and fetch a
new set of 3 images:

<script src="" type="text/_javascript_"></
script>
<script src="" type="text/
_javascript_"></script>
<link rel="stylesheet" type="text/css" href="" />
<link rel="stylesheet" type="text/css" href="" />

<script type="text/_javascript_">

jQuery(document).ready(function()
{
    $('#mycarousel').jcarousel({
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});

function decode(s)
{
    return s.replace(/&amp;/g, "&")
            .replace(/&quot;/g, '"')
            .replace(/&#039;/g, "'")
            .replace(/&lt;/g, "<")
            .replace(/&gt;/g, ">");
};

function mycarousel_itemLoadCallback(carousel, state) {


    carousel.lock();


        //for (var i = carousel.first; i <= carousel.last; i++) {
            mycarousel_itemAddCallback(carousel, carousel.first,
carousel.last);
        //}

};

function mycarousel_itemAddCallback(carousel, first, last) {
    // Unlock
    carousel.unlock();

    $.getJSON("http://localhost:59396/xxx/xxxHandler.ashx?
action=""> + "&cfirst=" + carousel.first +
"&clast=" + carousel.last,
        function(data) {
            carousel.size(data.length);
            $.each(data, function(i, item) {
                carousel.add(i, decode(item.ImageTag));
                if (i == 3) return false;
            });
        });
};

</script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ul id="mycarousel" class="jcarousel-skin-ie7">
                <!-- this will be dynamically populated -->
            </ul>
        </div>
    </form>
</body>
</html>

I don't know what else to try here or how to get that working like the
example.  And I don't think I need all that paging logic because I'm
not using Flickr, and I want to just base the next set to fetch based
on the first and last index of the carousel.

Reply via email to