This example showcases the dynamic loading capabilities of the YUI Carousel Control. The YUI Carousel Control exposes an event called
event is fired whenever the Carousel needs items to be loaded into it for
display. Subscribing to this event makes it easy to dynamically load
the next set of images.
Here we will use the YUI Carousel Control's
loadItems event to dynamically
load the images on the fly.
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 few simple CSS rules to set the dimensions for the Carousel items.
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.
The YUI Carousel Control exposes a
loadItems custom event that is fired
when the Carousel needs more items to be loaded. This becomes very handy
for us since we can subscribe to it and add more items in to the Carousel
widget when required.
In our case, the server program returns an array (JSON) of images. This is
parsed in the Ajax callback and then the Carousel's
addItem() is called for
Apart from subscribing to this event, for displaying the selected image as a spotlight, we can subscribe to the
itemSelected event that Carousel control exposes.
This event is triggered whenever an item is selected and it returns the
index of the selected item. With the index of the item, we can use the
getElementForItem() API to get the reference to the Carousel's item (an
li element in
The getLargeImage() function is quite easy to implement. Since we have the reference to the Carousel's item, it is straightforward to implement a function that extracts the image within it.
Note: Logging and debugging is currently turned off for this example.