mootools

References to Documentation

1. Native/Element.js#Element.initialize
2. Native/Element.js#Element.setHTML
3. Native/Element.js#Element.injectBefore
4. Native/Element.js#Element.addClass
5. Element/Element-Event.js#Element.addEvent
6. Native/Array.js#Array.each
7. Class/Class-Extras.js#Chain
8. Native/Function.js#Function.periodical

var imgCount = 0;
var addImage = function(image) {
	var el     = new Element('div', {'class': 'preview'});
	var name   = new Element('h3').setHTML(++imgCount +'. '+ image.name).injectInside(el);
	var desc   = new Element('span').setHTML(image.description).injectAfter(name);
	var img    = new Element('img', {'src': '/demos/Chain.Periodical/img/' + image.src}).injectAfter(desc);
	var footer = new Element('span').injectAfter(img);
	if (image.views > 250) footer.setHTML('Super Popular!').addClass('SUPERpopular');
    else if (image.views > 50) footer.setHTML('Popular').addClass('popular');
	else footer.addClass('normal');
	el.injectTop($('gallery'));	
}
 
$("addImages").addEvent("click", function(e) {
	var images  = [{"name":"Blue Earth", "src":"earth-blue.jpg", "description":"A blue version of Earth.", "views":200},{"name":"User Profile", "src":"user.jpg", "description":"A chubby user guy.", "views":0},{"name":"Mouse", "src":"mouse.jpg", "description":"Standard mouse icon.", "views":99},{"name":"Gold Earth", "src":"earth-gold.jpg", "description":"A gold version of Earth.", "views":7855},{"name":"Page and Pencil", "src":"edit.jpg", "description":"A piece of paper and a pencil.", "views":5},{"name":"Speaker", "src":"speaker.jpg", "description":"A speaker.", "views":16},{"name":"Orange Monitor", "src":"monitor.jpg", "description":"A yellow, glowing monitor.", "views":355},{"name":"Software Box", "src":"package.jpg", "description":"A nice wrapped package in a box.", "views":23452},{"name":"FIRE!!!!", "src":"fire.jpg", "description":"Orange flame.", "views":395},{"name":"Screwdriver Paper", "src":"setting.jpg", "description":"A screwdriver in front of a piece of paper.", "views":42}];
	var myChain = new Chain();
	images.each(function(image) { myChain.chain( function(){ addImage(image); } ); });
	var runChain = function() { 
		myChain.callChain();
		if (myChain.chains.length == 0) { runChain = $clear(timer); } 
	}
	var timer = runChain.periodical(500);
	new Event(e).stop();
});

<a href="#" id="addImages">Add Images</a>
<div id="gallery">
</div>

.preview {
	float: left;
	width: 180px;
	height: 180px;
	margin: 4px;
	padding: 5px;
	text-align: center;
	background-color: #F9F9F9;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
}
 
.preview span { 
	display: block;
	font-size: 11px; 
	margin-bottom: 4px;
}
 
.popular {
	color: #2e8531;
	font-weight: bold;
}
 
.SUPERpopular {
	font-weight: bold;
	color: #d62222;
}
 
.normal {
	font-weight: bold;
}
 
h1,h2,h3,h4 {
	margin: 0;
}