Tutorial Dog

Be sure to check out the second iteration of the image gallery.

This free image gallery based on javascript is a quick & easy solution. Implementing the demo doesn’t requre knowledge of any javascript. In this article, I’ll explain and breakdown the javascript that runs the image gallery using the javascript framework Mootools.

Demo:

Download Image Gallery

---

The Javascript image gallery is built from Mootools, an open-source object-oriented Javascript framework. If you’ve seen some cool graphical interactions you wouldn’t expect on a web page, chances are they are Mootools or another similiar framework like jQuery.

The Javascript:

window.addEvent('domready', function() {
	var drop = $('large');
	var dropFx = drop.effect('background-color', {wait: false});
	$$('.item').each(function(item){
		item.addEvent('click', function(e) {
			drop.removeEvents();
			drop.empty();
			var a = item.clone();
			a.inject(drop);
			dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
		});
	});
});

The HTML:

<div id="imagegallery">
	<div id="items">
		<div class="item">
			<img src="images/167461515_05807d9fdc.jpg" alt="image" />
			<p>Image 1</p>
		</div>
		<div class="item" >
			<img src="images/229805603_e84bcf23bf.jpg" alt="image" />
			<p>Image 2</p>
		</div>
		&