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="../scripts/jquery-1.3.2.min.js" type="text/javascript"></
script>
<script src="../scripts/jquery.jcarousel.pack.js" type="text/
javascript"></script>
<link rel="stylesheet" type="text/css" href="../css/
jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="../css/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function()
{
$('#mycarousel').jcarousel({
itemLoadCallback: mycarousel_itemLoadCallback
});
});
function decode(s)
{
return s.replace(/&/g, "&")
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/</g, "<")
.replace(/>/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=carouselproducts&setsize=3" + "&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 by calling my getJSON on click of next or previous buttons.