Here we will use YUI Carousel Control's
loadItems event and
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
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.
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.