This example uses the YUI Carousel Control to showcase a simple spotlight
example using its
itemSelected event. In this example, you can use arrow
keys to select items as well as click on an item to select it.
Though this functionality looks a little complicated, it is very easy to
implement. This is because the YUI Carousel Control handles the keyboard
event and the mouse click event for setting the selection. When an item is
selected, the YUI Carousel Control triggers an
itemSelected event. This
example subscribes to the
itemSelected event to display the selected
image in the spotlight.
Here we will use the YUI Carousel Control's
itemSelected event to display
the selected image.
This example has the following dependencies:
This example uses progressive enhancement; the Carousel is created from an ordered list.
We will add a container element where we can display the spotlight image.
We'll have only one (but necessary) CSS rule to set the height for the Carousel items.
Since we have the elements in place, we can invoke the Carousel's
constructor to create the widget. After having the Carousel object, we can subscribe to the
itemSelected event that it 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 getImage() 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.