YUI Library Examples: Carousel Control: Spotlight example

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:


1	<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/carousel/assets/skins/sam/carousel.css">
2	<script src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-dom-event.js"></script>
3	<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
4	<script src="http://yui.yahooapis.com/2.9.0/build/carousel/carousel-min.js"></script>
	view plain \| print \| ?

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


1	<div id="container">
2	<ol>
3	<li>
4	<img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg">
5	</li>
6	<li>
7	<img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg">
8	</li>
9	<li>
10	<img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg">
11	</li>
12	<li>
13	<img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg">
14	</li>
15	<li>
16	<img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg">
17	</li>
18	<li>
19	<img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg">
20	</li>
21	<li>
22	<img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg">
23	</li>
24	<li>
25	<img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg">
26	</li>
27	<li>
28	<img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg">
29	</li>
30	</ol>
31	</div>
	view plain \| print \| ?

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


1	<div id="spotlight"></div>
	view plain \| print \| ?

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


1	/* Always be sure to give your carousel items a width and a height */
2	.yui-carousel-element li {
3	height: 75px;
4	width: 75px;
5	opacity: 0.6;
6	}
	view plain \| print \| ?

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 Carousel's getElementForItem() API to get the reference to the Carousel's item (an li element in our case).


1	YAHOO.util.Event.onDOMReady(function (ev) {
2	var carousel = new YAHOO.widget.Carousel("container");
3	carousel.on("itemSelected", function (index) {
4	var item = carousel.getElementForItem(index);
5
6	if (item) {
7	spotlight.innerHTML = "<img src=\"" + getImage(item) + "\">";
8	}
9	});
10	carousel.render(); // get ready for rendering the widget
11	carousel.show(); // display the widget
12	});
	view plain \| print \| ?

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.


1	// Get the image link from within its (parent) container.
2	function getImage(parent) {
3	var el = parent.firstChild;
4
5	while (el) { // walk through till as long as there's an element
6	if (el.nodeName.toUpperCase() == "IMG") { // found an image
7	// flickr uses "_s" suffix for small, and "_m" for big images respectively
8	return el.src.replace(/_s\.jpg$/, "_m.jpg");
9	}
10	el = el.nextSibling;
11	}
12
13	return "";
14	}
	view plain \| print \| ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: Carousel Control: Spotlight example

Using the Carousel Control to Spotlight the Selected Item

Configuration for This Example

YUI Logger Output:

Logger Console

Carousel Control Examples:

More Carousel Control Resources: