YUI Library Home

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.

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:

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

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

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:

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.

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.

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.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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