Using the Pagination Control as the navigation for the Carousel Control

In this example we'll use the YUI Paginator Control for navigating through the YUI Carousel Control.

This example has the following dependencies:

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

This example uses progressive enhancement; the Carousel is created from an ordered list. This is not a requirement.

<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 element where the YUI Paginator Control would place its navigation controls.

<div id="pagination"></div>

We will add a container element where the spotlight image is displayed.

<div id="spotlight"></div>

We'll have to set the dimensions of a single item in the Carousel to make it adjust the container width automatically based on the number of items to be displayed in the view port.

.yui-carousel-element li { height: 75px; width: 75px; }

Along with the above CSS rule, we'll add some more CSS rules to style the Paginator control.

#pagination { font: 13px Arial, Helvetica, sans-serif; margin: 10px auto; padding: 1px; text-align: center; width: 240px; } .yui-skin-sam .yui-pg-page { background: #fff; border: 1px solid #cbcbcb; margin: 0 1px; padding: 2px 6px; }

Since we are using the Paginator control for the navigation, we can hide the Carousel control's navigation. In addition to this, we can style the Carousel container to look pretty.

.yui-carousel-nav { display: none; } #container { border: none; background: #e2edfa; -moz-border-radius: 6px; padding: 8px 16px 4px; }

Since we have the elements in place, we can invoke the Carousel's constructor to create the widget. Once the Carousel is instantiated, we can get the total number of records (items) to be used to instantiate the Paginator.

YAHOO.util.Event.onDOMReady(function (ev) { var carousel = new YAHOO.widget.Carousel("container"); var numItems = carousel.get("numItems"); var numVisible = carousel.get("numVisible"); var paginator = new YAHOO.widget.Paginator({ containers: "pagination", rowsPerPage: 1, template: "{PreviousPageLink} {PageLinks} {NextPageLink}", totalRecords: Math.ceil(numItems / numVisible) });

On clicking any of the pagination links, the Paginator control fires a changeRequest event. We can subscribe to this event to navigate to the appropriate page in the Carousel.

paginator.subscribe("changeRequest", function (state) { // set the selectedItem so that the Carousel scrolls to the page automatically carousel.set("selectedItem", (state.page - 1) * numVisible); paginator.setState(state); });

Similarly, when the user scrolls through the Carousel using a keyboard (by hitting the arrow keys), whenever the Carousel scrolls to a new page it triggers a pageChange event. This event needs to be listened to set the Paginator to the correct state on such an event.

carousel.on("pageChange", function (page) { // Paginator's page begins from 1 // Also, we need to suppress this triggering a changeRequest event. paginator.setPage(page + 1, true); });

Now, we can subscribe to the itemSelected 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 (an li element 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 straightforward 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 "";

Finally render both the controls.

carousel.render(); carousel.show(); paginator.render();

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.