YUI Library Examples: Carousel Control: Using deferred loading of items and Carousel's built-in paginator

Demonstrates how to enable deferred loading of items and Carousel's own paginator

Here we will use YUI Carousel Control's loadItems event and replaceItem method to dynamically load any one of Carousel's pages on the fly with Carousel's built-in paginator.

This example has the following dependencies:

Initially we use YUI Connection Manager to load the initial set of items as soon as part of the DOM is visible.

We have a required CSS rule to set the dimensions for the Carousel items.

And, as we'll see later, since we're increasing the default number of UI pager buttons which will be displayed, we increase the amount of space required to display the 6th page button, in IE6 and IE7:

The YUI Carousel Control's constructor is passed numItems (the total number of items) so that it triggers the loadItems event if the items are not available. We'll use Connection Manager to load a set of items into the Carousel as early as possible.

For a more traditional paginator, we increase the MAX_PAGER_BUTTONS property (default is 5 pages, this example has 100), which causes Carousel to render a paginator comprised of a row of anchors in leu of a select box.

YAHOO.util.Event.onDOMReady(function (ev) {

var carousel, spotlight = YAHOO.util.Dom.get("spotlight");

/* Allow for anchor pagination to better demonstrate backwards loading. 
       Note: MAX_PAGER_BUTTONS defaults to 5 making a Carousel with more than
       5 pages spawn a select box containing pages instead of page anchors. */

YAHOO.widget.Carousel.prototype.CONFIG.MAX_PAGER_BUTTONS = 100;

carousel = new YAHOO.widget.Carousel("container", {
        /* Setting numItems is required for dynamic loading. This property lets Carousel 
           know how many total items it will ever be populated with.
           Not to be confused with numVisible: the number of items to display
           per page. In this case we don't specify it and Carousel 
           defaults to 3 items visible per page. */

numItems: 17
    });

batchSize = carousel.get("numVisible");

YAHOO.util.Connect.asyncRequest("GET", "assets/php/getimages2.php" + "?r="+Math.random()+"&batchSize=" + batchSize, {
        success: function (o) {
            var i, r = eval("(" + o.responseText + ")");

curpos = r.length;

for (i = 0; i < curpos; i++) {
                items.push(r[i]);
            }

// check if the Carousel widget is available
            if (typeof carousel != "undefined") {
                for (i = 0; i < curpos; i++) {
                    // if so, add each item
                    carousel.addItem(getImageTag(items[i]));
                }
                carousel.set("selectedItem", 0);
                items = [];
            }
        },

failure: function (o) {
            alert("Ajax request failed!");
        }
    });

carousel.on("loadItems", function (o) {
        // more items available?
        getImages.call(this, o);
    });

carousel.on("itemSelected", function (index) {
        // item has the reference to the Carousel\'s item
        var item = carousel.getElementForItem(index);

if (item) {
            spotlight.innerHTML = "<img src=\""+getLargeImage(item)+"\">";
        }
    });
});

Triggered by the loadItems event, the getImages() function sends a request to our web service specifying the current item selected (curpos) and the amount of images to return (batchSize). If the request is a success, the image is extracted from the return data and Carousel is populated accordingly: if mock loading items are detected on the previous page (inserted as placeholders after a user skips one or more pages that have never been loaded), the replaceItem method is invoked, which swaps out each placeholder with its respective image; alternatively, the addItem method is called when a user navigates successively through pages.

var curpos, batchSize, items = [];
function getImages(o) {
    var carousel = this,
        revealEnabled = carousel.get("revealAmount"),
        numVisible = carousel.get("numVisible"),
        curpos = o.num > numVisible + (revealEnabled?1:0) ? o.last - (o.last % numVisible) : o.first;
           
    YAHOO.util.Connect.asyncRequest("GET", "'.$webService.'"+ "?r="+Math.random()+"&batchSize="+ batchSize + "&pos=" + curpos,
            {
                success: function (o) {
                    var i = curpos,
                        j = 0,
                        r = eval("(" + o.responseText + ")"),
                        item, 
                        loadingItems;
                        
                    curpos += r.length;

while (i < curpos) {
                        
                        if (r[j]) {
                          
                          item = getImageTag(r[j]);

loadingItems = carousel.getLoadingItems();

if(loadingItems[i]){
                               // use replaceItem to swap out each placeholder item on the previous page and allow for backwards navigation 
                               carousel.replaceItem(item,i);
                           } else {
                               carousel.addItem(item);
                           }
                            
                        } else {
                            break;
                        }
                        i++;
                        j++;
                    }

carousel.set("selectedItem", carousel.get("firstVisible"));
                },

failure: function (o) {
                    alert("Ajax request failed!");
                }
    });
}

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.

YUI Library Examples: Carousel Control: Using deferred loading of items and Carousel's built-in paginator

Demonstrates how to enable deferred loading of items and Carousel's own paginator

Configuration for This Example

YUI Logger Output:

Carousel Control Examples:

More Carousel Control Resources: