Using the Carousel Widget To Organize Images Into Rows and Columns

Here we will use the YUI Carousel Control's numVisible configuration setting to display an album of images.

This example has the following dependencies:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/carousel/assets/skins/sam/carousel.css"> <script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-dom-event.js"></script> <script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script> <script src="http://yui.yahooapis.com/2.8.0r4/build/carousel/carousel-min.js"></script>

This example uses progressive enhancement; the Carousel is built from an existing ordered list.

<div id="container"> <ol id="carousel"> <li> <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/69/213130158_0d1aa23576_d.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/72/213128367_74b0a657c3_d.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/98/213129707_1f40c509fa_d.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/80/259391136_6fa405c7f6_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/87/258609416_bf0d44b445_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/119/259395209_66c773a072_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/83/259399727_3d170d0445_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/121/258614620_16eb6867f7_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/108/259397333_3e4a3960bd_s.jpg" width="75" height="75"> </li> </ol> </div>

Make sure all carousel items have a width and height; even if multi-row has not been enabled.

/* Always be sure to give your carousel items a width and a height */ .yui-carousel-element li { width: 75px; height: 75px; } .yui-carousel-element .yui-carousel-item-selected { border:0; /* Override selected item's dashed border so it feels more like a photo album */ }

Since we have the elements in place, we enable multi-row by passing Carousel's constructor the numVisible property set to an array specifying X columns by Y rows.

YAHOO.util.Event.onDOMReady(function (ev) { var carousel = new YAHOO.widget.Carousel("container", { // specify number of columns and number of rows numVisible: [3,2] }); carousel.render(); // get ready for rendering the widget carousel.show(); // display the widget }

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.