YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Carousel Control: Spotlight example

# Carousel Control: 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.

View example in new window.

## Using the Carousel Control to Spotlight the Selected Item

Here we will use the YUI Carousel Control's `itemSelected` event to display the selected image.

This example has the following dependencies:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/carousel/assets/skins/sam/carousel.css"> <script src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-dom-event.js"></script> <script src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script> <script src="http://yui.yahooapis.com/2.6.0/build/carousel/carousel-beta-min.js"></script>

This example uses progressive enhancement; the Carousel is created from an ordered list.

<div id="container"> <ol> <li> <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg"> </li> <li> <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg"> </li> </ol> </div>

We will add a container element where we can display the spotlight image.

<div id="spotlight"></div>

We'll have only one CSS rule to set the height for the Carousel items.

.yui-carousel-element li { height: 75px; width: 75px; }

Since we have the elements in place, we can invoke the Carousel's constructor to create the widget. The Carousel's `selectedItem` property returns the index of the currently selected item. So, using that property and the `getElementForItem()` API, we can display the image of the selected item when the Carousel is rendered.

YAHOO.util.Event.onDOMReady(function (ev) { var carousel = new YAHOO.widget.Carousel("container"); carousel.render(); // get ready for rendering the widget carousel.show(); // display the widget // display the first selected item in the spotlight spotlight.innerHTML = "<img src=\"" + getImage(carousel.getElementForItem(carousel.get("selectedItem"))) + "\">"; }

Now, we can subscribe to the `selectedItem` event that the Carousel 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 Carousel's `getElementForItem()` API to get the reference to the Carousel's item (an `li` element in our case).

carousel.on("itemSelected", function (index) { // item has the reference to the Carousel's item var item = carousel.getElementForItem(index); });

Once the reference to the Carousel's item is obtained, it is straightforward to implement a function that extracts the image within it.

// Get the image link from within its (parent) container. function getImage(parent) { var el = parent.firstChild; while (el) { // walk through till as long as there's an element if (el.nodeName.toUpperCase() == "IMG") { // found an image // flickr uses "_s" suffix for small, and "_m" for big images respectively return el.src.replace(/_s\.jpg$/, "_m.jpg"); } el = el.nextSibling; } return "";

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Carousel Control Examples:

- Spotlight example
- Circular Carousel example
- Partially revealing previous and next items
- Using both images and text within an item
- Using Ajax for deferred loading of items
- Using the Carousel ARIA Plugin

### More Carousel Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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