There’s one thing left we need to do; we need to add the behavior that changes the picture information when a new image is selected. To do this, we can use one of the many built-in custom events fired by the carousel at different points during an interaction. Change the final <script> element in carousel3.html to the following: 

//create carousel control

var carousel = new YAHOO.widget.Carousel("scientists", {

animation: { speed: 0.5 },

isCircular: true

});

//names

var names = [

"Niels Bohr",

"Charles Darwin",

"Albert Einstein",

"Galileo Galilei",

"Isaac Newton",

"James Clerk Maxwell"

];

//picture info

var info = [

"Niels Henrik David Bohr...",

"Charles Robert Darwin...",

"Albert Einstein...",

"Galileo Galilei...",

"Sir Isaac Newton...",

"James Clerk Maxwell..."

];

//display selected image info

carousel.on("itemSelected", function(i) {

//get info container

var parent = YAHOO.util.Dom.get("information");

//remove child elements if present

(parent.hasChildNodes() != true) ? null : removeChildren();

function removeChildren() {

var children = YAHOO.util.Dom.getChildren("information");

for(prop in children) {

parent.removeChild(children[prop]);

}

}

//create new heading and paragraph

var heading = document.createElement("h2");

var p = document.createElement("p");

//get text from arrays

var headText = document.createTextNode(names[i]);

var pText = document.createTextNode(info[i]);

//add text to new elements

heading.appendChild(headText);

p.appendChild(pText);

//add new elements to page

parent.appendChild(heading);

parent.appendChild(p);

});

//render to page

carousel.render();

//display

carousel.show();

Save this change as carousel4.html . Let’s review what we added. First we added two new literal arrays, the first holding the names of the distinguished gentlemen in the images, the second holding information about each of them (I trimmed it down to just their names for readability; you can see the full information in the code files). 

After the arrays we add an event handler for the custom itemSelected event, which is fired every time an image is selected (this includes the initial selection when the page loads, the automatic selection when the carousel page is changed and a manual selection with the mouse). An anonymous function is passed to the event handler as the second argument, so this function will be executed every time the event is detected. 

Within the anonymous function we first get the container element that the name and information resides in using the dom utility’s get method. We then check the container element to see whether it has any child elements. This is done using JavaScript’s ternary statement. If it does contain child elements we call the removeChildren function. 

This function uses the getChildren method to return an object containing all of the child elements. We use a for…in loop to cycle through each property in the object and remove them all. This is necessary so that the container element doesn’t fill up with names and information after several selections. 

We then create new <h2> and <p> elements and textNodes to go into them. The textNodes are populated using the i argument, which is automatically passed to our anonymous function and refers to the index number (starting at 0) of the selected image. This allows us to get the correct name and matching information out of the arrays. The new elements are then inserted into the container element and the carousel’s render and show methods are called as before. 

When you run this page in the browser, you should be able to select an image in the carousel, and have the information <div> populated with information about the picture: 

Summary

In this article we looked at the new YUI carousel component; while it is still early in this component's life, enough functionality is exposed by its API for us to make good use of it. We looked at some of the basic properties and methods that can be used to work with the control programmatically and saw how the widget is rendered and behaves.