YUI Library Examples: Carousel Control: Using Ajax for deferred loading of items

Making the Carousel Widget to dynamically load images on the fly

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

This example has the following dependencies:


1	<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/carousel/assets/skins/sam/carousel.css">
2	<script src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-dom-event.js"></script>
3	<script src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
4	<script src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
5	<script src="http://yui.yahooapis.com/2.6.0/build/carousel/carousel-beta-min.js"></script>
	view plain \| print \| ?

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


1	<div id="container">
2	<ol id="carousel"></ol>
3	</div>
4	<!-- The spotlight container -->
5	<div id="spotlight"></div>
	view plain \| print \| ?

We have a few simple CSS rules to set the dimensions for the Carousel items.


1	.yui-carousel-element li {
2	height: 75px;
3	width: 75px;
4	}
	view plain \| print \| ?

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


1	YAHOO.util.Event.onAvailable("bd", function (args) {
2	YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php", {
3	success: function (o) {
4	var i, r = eval('(' + o.responseText + ')');
5	curpos = r.length;
6
7	for (i = 0; i < curpos; i++) {
8	items.push(r[i]);
9	}
10
11	// check if the Carousel widget is available
12	if (typeof carousel != "undefined") {
13	for (i = 0; i < curpos; i++) {
14	// if so, shove the elements into it
15	carousel.addItem(getImageTag(items[i]));
16	}
17	carousel.set("selectedItem", 0);
18	items = [];
19	}
20	},
21
22	failure: function (o) {
23	alert("Ajax request failed!");
24	}
25	});
26	});
	view plain \| print \| ?

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


1	YAHOO.util.Event.onDOMReady(function (ev) {
2	var i;
3
4	myLogReader = new YAHOO.widget.LogReader();
5	carousel = new YAHOO.widget.Carousel("container", { numItems: 17 });
6	carousel.render();
7	carousel.show();
8
9	if (items.length > 0) {
10	for (i = 0; i < curpos; i++) {
11	carousel.addItem(getImageTag(items[i]));
12	}
13	items = [];
14	}
15	});
	view plain \| print \| ?

The YUI Carousel Control 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.


1	function getImageTag(img) {
2	return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
3	}
4
5	function getImages() {
6	YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php?pos=" + curpos,
7	{
8	success: function (o) {
9	var i = curpos,
10	j = 0,
11	r = eval('(' + o.responseText + ')');
12
13	curpos += r.length;
14
15	while (i < curpos) {
16	if (r[j]) {
17	carousel.addItem(getImageTag(r[j]));
18	} else {
19	break;
20	}
21	i++;
22	j++;
23	}
24	},
25
26	failure: function (o) {
27	alert("Ajax request failed!");
28	}
29	});
30	}
31
32	carousel.on("beforeScroll", function (o) {
33	var i, j,
34	last = o.last,
35	num = carousel.get("numVisible");
36
37	if (!carousel.getItem(last+num)) {
38	// more items available?
39	getImages();
40	}
41
42	return true; // so that the event is not aborted
43	});
	view plain \| print \| ?

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
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: Carousel Control: Using Ajax for deferred loading of items

Making the Carousel Widget to dynamically load images on the fly

YUI Logger Output:

Carousel Control Examples:

More Carousel Control Resources: