Home arrow JavaScript arrow A Look at the New YUI Carousel Control

A Look at the New YUI Carousel Control

The Yahoo! User Interface library continues to grow and expand with new components being added and existing components being continually patched and updated to ensure full x-browser support and cutting-edge functionality. Version 3 of the YUI is due for full release at some point this year, but version 2 (current release 2.6) is at this point still the stable and recommended release for general use.

TABLE OF CONTENTS:
  1. A Look at the New YUI Carousel Control
  2. Enhancing the Page
  3. Additional Configuration
  4. Working with Carouselís Custom Events
By: Dan Wellman
Rating: starstarstarstarstar / 15
April 13, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

One of the components recently added is the Carousel component, a control for automatically scrolling content in an attractive and intuitive interface. Itís still a beta release at present ,which indicates that the API is not finalized and that there are likely to be bugs that need addressing. We can still use the component, though, and although we should be wary as the existing API may change, the full release will probably bring more new functionality than changes in how it is implemented. 

In this tutorial weíll be looking at a basic implementation of the control, the functionality we can use at this point in time, and the properties and methods exposed by the current API. I should point out that the examples used in this article have been thoroughly tested in todayís most common browser, but only on the Windows platform. The examples should work on other platforms, but the control or functionality may manifest itself slightly differently. You can examine the source files separately at the link, as well as check out a separate image file.

Getting Started

Letís have a look at the default control first, and by this I mean the most basic, least configured implementation possible, the barest minimum we can code and still derive a usable widget from. In your text editor of choice create the following page: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/carousel/assets/skins/sam/carousel.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>YUI Carousel Example 1</title>

</head>

<body class="yui-skin-sam">

<div id="scientists">

<ol>

<li><img src="img/scientists/bohr_thumb.jpg" alt="Niels Bohr"></li>

<li><img src="img/scientists/darwin_thumb.jpg" alt="Charles Darwin"></li>

<li><img src="img/scientists/einstein_thumb.jpg" alt="Albert Einstein"></li>

<li><img src="img/scientists/galileo_thumb.jpg" alt="Galileo Galilei"></li>

<li><img src="img/scientists/newton_thumb.jpg" alt="Isaac Newton"></li>

<li><img src="img/scientists/maxwell_thumb.jpg" alt="James Clerk Maxwell"></li>

</ol>

</div>

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/carousel/carousel-beta-min.js"></script>

<script type="text/javascript">

 

//create carousel control

var carousel = new YAHOO.widget.Carousel("scientists");

 

//render to page

carousel.render();

 

//display

carousel.show();

 

</script>

</body>

</html>

Save this file as carousel1.html. Letís review what weíve got; in the <head> we link to the skin file for the carousel component provided by Yahoo. This gives the carousel its default appearance and styles the elements that get added to the page automatically. 

On the page we have a container element that holds a simple ordered list with six list items. Each item contains an image. The images used in this example are all included in the download (the images file) for this article; use them, or use images of your own, it shouldnít make a difference. If you want to use your own images, make sure they are all of the same dimensions. 

At the end of the document (just before the closing </body> tag) we link to the script resources required by this component and then provide our own custom <script> element, which is used to create the carousel. 

First we call the constructor method, which invokes the control. The constructor takes a single argument, which is a string matching the id of the carouselís container element. We then render the control using its render method, which creates it but doesnít show it. Finally we call the show method, which does actually show it. When you run this file in your browser, you should see something like this:

 

 

In the default implementation a number of elements are created automatically by the widget, including the UI at the top for navigating between pages. Here we have a visual indicator of which page is selected, and also two arrows for navigating the pages. Both the page highlighter and buttons can be used to navigate the carousel pages. All of this behavior is built in and automatic, and everything should be fully functional. 



 
 
>>> More JavaScript Articles          >>> More By Dan Wellman
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: