Spotlight example
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
/* Style the spotlight container */
#spotlight {
border: 1px solid #ccc;
height: 180px;
margin: 10px auto;
padding: 1px;
width: 240px;
}
#container {
margin: 0 auto;
}
.yui-carousel-element li {
height: 75px;
opacity: 0.6;
width: 75px;
}
.yui-carousel-element .yui-carousel-item-selected {
opacity: 1;
}
Spotlight example
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.