We only want to load 3 (deferred loading). Then be able to click next, it hits my getJSON to load 3 new ones. Just like the Flickr example. I have not gotten this to work and worse, the Add button doesn't show enabled unless you give the carousel a size that is > than your data's length.
so even if I load only 3 images at first and give the carousel.size (data.length) which is 3, the next button is disabled. And even if I give it carousel.size(data.length + 1), I get the next button, but when clicked, it doesn't repaint the images with the new load from a new call of getJSON. On Jun 30, 8:58 am, Charlie <charlie...@gmail.com> wrote: > 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.htmlSo > 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.
