Carousel Widget: Spotlight Example

Using the Carousel Widget for spotlight example

Here we will use the YUI Carousel Widget'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.5.2/build/carousel/assets/skins/sam/carousel.css">
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/carousel/carousel-beta-min.js"></script>

This example uses progressive enhancement. So, the Carousel is created from an "ordered" list of elements.

<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 where we would 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 (LI 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 straight-forward 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 "";
}

Lets assemble everything together. The full JavaScript reads as follows:

(function () {
  var myLogReader, carousel, spotlight;
  
  function getImage(parent) {
    var el = parent.firstChild;
    
    while (el) {
      if (el.nodeName.toUpperCase() == "IMG") {
        return el.src.replace(/_s\.jpg$/, "_m.jpg");
      }
      el = el.nextSibling;
    }
    
    return "";
  }
  
  YAHOO.util.Event.onDOMReady(function (ev) {
    var myLogReader = new YAHOO.widget.LogReader(),
        spotlight   = YAHOO.util.Dom.get("spotlight"),
        carousel    = new YAHOO.widget.Carousel("container");
        
    carousel.render();
    carousel.show();
    
    spotlight.innerHTML = "<img src=\"" +
      getImage(carousel.getElementForItem(carousel.get("selectedItem"))) +
      "\">";
      
    carousel.on("itemSelected", function (index) {
      var item = carousel.getElementForItem(index);
      
      spotlight.innerHTML = "<img src=\"" + getImage(item) + "\">";
    });
  });
})();