YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Carousel Control: Using deferred loading of items and Carousel's built-in paginator

# Carousel Control: Using deferred loading of items and Carousel's built-in paginator

This example extends Using Ajax for deferred loading of items and demonstrates how to support YUI Carousel Control's built-in paginator via the `replaceItem` method.

View example in new window.

## 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.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Carousel Control Examples:

- Spotlight example
- Circular Carousel example
- Partially revealing previous and next items
- Using both images and text within an item
- Using Ajax for deferred loading of items
- Using deferred loading of items and Carousel's built-in paginator
- Multi-row example
- Pagination template example
- Using Paginator with Carousel
- Using the Carousel ARIA Plugin

### More Carousel Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings