Carousel Widget: Dynamic Loading Example

Making the Carousel Widget to dynamically load images on the fly

Here we will use the YUI Carousel Widget's "loadItems" event to dynamically load the images on the fly.

This example has the following dependencies:

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

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

<div id="container">
  <ol id="carousel"></ol>
</div>
<!-- The spotlight container -->
<div id="spotlight"></div>

We'll have the CSS rules to set the dimensions for the Carousel items.

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

We'll use the YUI Connection library to load a set of items into the Carousel as early as possible.

YAHOO.util.Event.onAvailable("bd", function (args) {
  YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php", {
      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, shove the elements into it
            carousel.addItem(getImageTag(items[i]));
          }
          carousel.set("selectedItem", 0);
          items = [];
        }
      },

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

Let us invoke the Carousel's constructor. The YUI Carousel Widget's constructor is passed with the total number of items so that it triggers the "loadItems" event if the items are not available.

YAHOO.util.Event.onDOMReady(function (ev) {
    var i;
    
    myLogReader = new YAHOO.widget.LogReader();
    carousel    = new YAHOO.widget.Carousel("container", { numItems: 17 });
    carousel.render();
    carousel.show();
                
    if (items.length > 0) {
        for (i = 0; i < curpos; i++) {
            carousel.addItem(getImageTag(items[i]));
        }
        items = [];
    }
});

The YUI Carousel Widget exposes a "loadItems" custom event that is fired when the Carousel needs more items to be loaded. This becomes very handy for us since we can subscribe to it and add more items in to the Carousel widget when required.

In our case, the server program returns an array (JSON) of images. This is parsed in the Ajax callback and then the Carousel's addItem() is called for every image.

function getImageTag(img) {
    return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
}

function getImages() {
    YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php?pos=" + curpos,
        {
            success: function (o) {
                var i = curpos,
                    j = 0,
                    r = eval('(' + o.responseText + ')');
                            
                curpos += r.length;

                while (i < curpos) {
                    if (r[j]) {
                        carousel.addItem(getImageTag(r[j]));
                    } else {
                        break;
                    }
                    i++;
                    j++;
                }
            },

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

carousel.on("beforeScroll", function (o) {
    var i, j,
        last  = o.last,
        num   = carousel.get("numVisible");

    if (!carousel.getItem(last+num)) {
        // more items available?
        getImages();
    }

    return true; // so that the event is not aborted
});

Putting it altogether, the full JavaScript reads as follows:

var carousel, curpos, items = [], myLogReader;

function getImageTag(img) {
    return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
}

function getImages() {
    YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php?pos=" + curpos,
        {
            success: function (o) {
                var i = curpos,
                    j = 0,
                    r = eval('(' + o.responseText + ')');
                            
                curpos += r.length;

                while (i < curpos) {
                    if (r[j]) {
                        carousel.addItem(getImageTag(r[j]));
                    } else {
                        break;
                    }
                    i++;
                    j++;
                }
            },

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

YAHOO.util.Event.onAvailable("bd", function (args) {
    YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php",
        {
            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, shove the elements into it
                        carousel.addItem(getImageTag(items[i]));
                    }
                    items = [];
                }
            },

            failure: function (o) {
                alert("Ajax request failed!");
            }
        });
});
            
YAHOO.util.Event.onDOMReady(function (ev) {
    var i;
    
    myLogReader = new YAHOO.widget.LogReader();
    carousel    = new YAHOO.widget.Carousel("container");
    carousel.render();
    carousel.show();
                
    if (items.length > 0) {
        for (i = 0; i < curpos; i++) {
            carousel.addItem(getImageTag(items[i]));
        }
        items = [];
    }
    
    carousel.on("beforeScroll", function (o) {
        var i, j,
            last  = o.last,
            num   = carousel.get("numVisible");

        if (!carousel.getItem(last+num)) {
            // more items available?
            getImages();
        }

        return true; // so that the event is not aborted
    });
});