Demonstrates how to enable deferred loading of items and Carousel's own paginator

Here we will use YUI Carousel Control's loadItems event and replaceItem method to dynamically load any one of Carousel's pages on the fly with Carousel's built-in paginator.

This example has the following dependencies:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/carousel/assets/skins/sam/carousel.css"> <script src="http://yui.yahooapis.com/2.8.1/build/yahoo/yahoo-dom-event.js"></script> <script src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script> <script src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"></script> <script src="http://yui.yahooapis.com/2.8.1/build/carousel/carousel-min.js"></script>

Initially we use YUI Connection Manager to load the initial set of items as soon as part of the DOM is visible.

<div id="container"><ol id="carousel"></ol> </div> <!-- The spotlight container --> <div id="spotlight"></div>

We have a required CSS rule to set the dimensions for the Carousel items.

/* Always be sure to give your carousel items a width and a height */ .yui-carousel-element li { height: 75px; width: 75px; }

And, as we'll see later, since we're increasing the default number of UI pager buttons which will be displayed, we increase the amount of space required to display the 6th page button, in IE6 and IE7:

/* Since for this example, we display more than the default 5 page buttons, by setting MAX_PAGER_BUTTONS, we increase the offset margin for IE6/7 to make space for the 6th button */ .yui-skin-sam .yui-carousel-nav ul { *margin-left: -190px; }

The YUI Carousel Control's constructor is passed numItems (the total number of items) so that it triggers the loadItems event if the items are not available. We'll use Connection Manager to load a set of items into the Carousel as early as possible.

For a more traditional paginator, we increase the MAX_PAGER_BUTTONS property (default is 5 pages, this example has 100), which causes Carousel to render a paginator comprised of a row of anchors in leu of a select box.

YAHOO.util.Event.onDOMReady(function (ev) { var carousel, spotlight = YAHOO.util.Dom.get("spotlight"); /* Allow for anchor pagination to better demonstrate backwards loading. Note: MAX_PAGER_BUTTONS defaults to 5 making a Carousel with more than 5 pages spawn a select box containing pages instead of page anchors. */ YAHOO.widget.Carousel.prototype.CONFIG.MAX_PAGER_BUTTONS = 100; carousel = new YAHOO.widget.Carousel("container", { /* Setting numItems is required for dynamic loading. This property lets Carousel know how many total items it will ever be populated with. Not to be confused with numVisible: the number of items to display per page. In this case we don't specify it and Carousel defaults to 3 items visible per page. */ numItems: 17 }); batchSize = carousel.get("numVisible"); YAHOO.util.Connect.asyncRequest("GET", "assets/php/getimages2.php" + "?r="+Math.random()+"&batchSize=" + batchSize, { success: function (o) { var i, r = eval("(" + o.responseText + ")"); curpos = r.length; for (i = 0; i < curpos; i++) { items.push(r[i]); } // check if the Carousel widget is available if (typeof carousel != "undefined") { for (i = 0; i < curpos; i++) { // if so, add each item carousel.addItem(getImageTag(items[i])); } carousel.set("selectedItem", 0); items = []; } }, failure: function (o) { alert("Ajax request failed!"); } }); carousel.on("loadItems", function (o) { // more items available? getImages.call(this, o); }); carousel.on("itemSelected", function (index) { // item has the reference to the Carousel\'s item var item = carousel.getElementForItem(index); if (item) { spotlight.innerHTML = "<img src=\""+getLargeImage(item)+"\">"; } }); });

Triggered by the loadItems event, the getImages() function sends a request to our web service specifying the current item selected (curpos) and the amount of images to return (batchSize). If the request is a success, the image is extracted from the return data and Carousel is populated accordingly: if mock loading items are detected on the previous page (inserted as placeholders after a user skips one or more pages that have never been loaded), the replaceItem method is invoked, which swaps out each placeholder with its respective image; alternatively, the addItem method is called when a user navigates successively through pages.

var curpos, batchSize, items = []; function getImages(o) { var carousel = this, revealEnabled = carousel.get("revealAmount"), numVisible = carousel.get("numVisible"), curpos = o.num > numVisible + (revealEnabled?1:0) ? o.last - (o.last % numVisible) : o.first; YAHOO.util.Connect.asyncRequest("GET", "'.$webService.'"+ "?r="+Math.random()+"&batchSize="+ batchSize + "&pos=" + curpos, { success: function (o) { var i = curpos, j = 0, r = eval("(" + o.responseText + ")"), item, loadingItems; curpos += r.length; while (i < curpos) { if (r[j]) { item = getImageTag(r[j]); loadingItems = carousel.getLoadingItems(); if(loadingItems[i]){ // use replaceItem to swap out each placeholder item on the previous page and allow for backwards navigation carousel.replaceItem(item,i); } else { carousel.addItem(item); } } else { break; } i++; j++; } carousel.set("selectedItem", carousel.get("firstVisible")); }, failure: function (o) { alert("Ajax request failed!"); } }); }

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.