A Look at the New YUI Carousel Control - Enhancing the Page (
Page 2 of 4 )
We use no additional CSS of our own in the first example, and while we can happily scroll through the pages containing the images, and select individual images, nothing else really happens. Let’s add some additional elements to our page as well as some basic styling. Change carousel1.html
so that it appears as follows:
<!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">
<link rel="stylesheet" type="text/css" href="myCarousel.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YUI Carousel Example 2</title>
</head>
<body class="yui-skin-sam">
<div id="scientists">
<span id="title">Great Men of Science</span>
<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>
<div id="information"></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 the changes as carousel2.html
. We haven’t added much; a <span> element to use as the title of the carousel, and a new <div> element which will hold information about each image. We also need some CSS; in a new page in your text editor add the following stylesheet:
#scientists { margin:0 auto; }
#title {
font-weight:bold; font-size:18px; position:absolute;
top:8px; left:10px;
}
.yui-carousel .yui-carousel-item-selected, .yui-carousel-element li {
margin:0; width:115px; height:160px;
}
#information {
width:341px; margin:0 auto; border:1px solid #808080; padding:5px;
}
#information h2 { margin:0 0 10px 0; }
#information p { margin:0; }
Save this as myCarousel.css
in the same location as the HTML files. There's really nothing worth going into much detail about in this file, except for the third rule; we need to override some of the styling provided by the component, just to tidy up the images a little. As our stylesheet comes after the carousel stylesheet, our style rules will take precedence provided we match or exceed the original specificity.
If you view the new page in your browser, you should see the title at the top of the widget, and you may be able to tell that the images sit a little better in the carousel.
