Slideshow UI Component (YUI Carousel)

My Slideshow is an implementation of the YUI (Yahoo User Interface) Carousel.  I created this prior to the beta release of the Carousel.  Some of the features of my slideshow are pause when hover over slide, autoplay, movie slide, auto slide creation from included markup, and thumbnails.

The Slideshow implementation contains HTML markup, javascript, and CSS.

---

HTML Markup

Here is an example of the HTML markup for the image of the slideshow above.

<div id="mySlideshow" class="slideShow">
  <ol class="slideshow-slide">    
      <li class="slideshow-selected clickable"
              style="background-image:url('.....'); background-position:50%; "
              onclick="window.location='....'">
      </li>
      <....>
  </ol>
  <div class="thumb_cont">
      <ol class="slideshow-thumbs">
          <li class="slideshow-selected"><img
                  src="thumb.jpg"/></li>
        <.......>
      </ol>
  </div>
  <div class="moviePlayer hide-movie">
      <div class="swapPlayer"></div>
  </div>
</div>

There are a few important CSS classes that are in the markup to let the javascript know which components are for what. The the class 'slideshow' lets the script know that this element is intended to be a slideshow. When the script finds a slideshow in the DOM it then sets up the rest of the elements to be used for the slide show. The <ol> with the 'slideshow-slide' class lets the slideshow object know that is the container of the slides. The <ol> with the class 'slideshow-thumbs' is the container for the thumb nails. The thumbnail <li> should not contain a bunch of HTML. The 'slideshow-selected' class indicates which slide / thumb is the current and allows you to style it differently. Lastly the 'moviePlayer', and 'hide-movie' <div> is the container if you would like a slide to play a flash movie. Finally the swapPlayer div is an element that is replaced by the flash player itself. The movie play functionality is a little more complex we will get into that later.

---

Javascript

The javascript follows the YUI object creation pattern. The Slideshow extends YAHOO.util.Element. Initially I made the object so it could be used and instantiated by calling new YAHOO.USANA.SlideShow(id,args); but then for my case I figured it was easier to tell my coworkers to set up the markup and include the js file, then it works magically. The magic is this little bit of code at the top of the file:

var  slideShows=[],Dom;
Dom= YAHOO.util.Dom;
YAHOO.util.Event.onDOMReady(function(){
  var instances,i;
  instances = Dom.getElementsByClassName("slideShow","div",document.body);
  for(i=0;i<instances.length;i++){
      slideShows.push(new YAHOO.USANA.SlideShow(instances[i],{}));
  }
}
);

Obviously there are dependencies on YAHOO libraries. The YAHOO-DOM-Event and YUI Element should be all you need. Also the swfplayer. is used for the movie player. The path in the SlideShow.0.1.js will have to be changed for the 'player.swf' object if you are going to be using a flash player.
Here is the order to include the javascript libraries:
<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="SlideShow.0.1.js"></script>

---

Cascading Style Sheet (CSS)

There is also an important CSS component. In the header include the SlideShow.0.1.css. Also set the height and width of the slideshow div. For example #mySlideshow{ height:150px; width:637px;}.

class	description
slideshow	Indicates that this is a slideshow element and will contain the necessary elements (slideshow-slide, slideshow-thumbs, and moviePlayer)
slideshow-thumbs	Indicates the list object that contains the thumb s
slideshow-slide	Indicates the list object that contains the slide s
slideshow-selected	Usable on thumbs or slides indicates that the element is the active slide.
clickable	Adds the 'hand' on hover.
movieSlide	A special div that should be display:none and the innerHTML is the path for a movie .flv file.

---

Movie Slide

Movie slides are kinda different and I wanted to have the feature. However, I think I kinda rushed it in. The <li> that is a movie type slide should contain this element. The innerHTML of the div would be the path to your .flv file <div class='movieSlide' style='display:none;'>/path/to/your/movie.flv</div>. I treated the div as if it was xml The <li> can still have a background image to advertise the movie or the <li> could contain other HTML to entice the user to click the slide and play the movie. The click action of the <li> for movie type slides is used solely for launching the player. Movie slides can exist in slideshows that also have non-movie slides.

---

Example

You can see the production example at http://shop.usana.com/shop/cart/Landing

There is also an example in the attached .zip that you can run on your local machine. I had a few problems with the movie in the example because the end event and the stop event are supposed to trigger a function in the slideshow so it can continue. That didn't work so I hacked at the slideshow.js you can diff the two and see what i did.
You can download the example at:
http://sites.google.com/a/mefford.org/paul/software-engineering/slideshow-ui-component/slideshow-example.zip?attredirects=0&d=1