jQuery flip gallery plugin

In a recent project for a children’s early learning centre, I was given a design with a mosaic-like homepage full of images. The designer asked for a little bit of animation, but didn’t have any particular ideas.

I wrote a small jQuery plugin that simply randomizes some of the images every couple of seconds. To make it more interesting, I used an image flip effect described here. While it didn’t take long to write the code, I think this subtle little effect suits the theme of an early learning centre for small children or babies well, where it’s all about discovering, exploring and curiosity.

The HTML

<div id="gallery">
	<div class="image"><img src="1.jpg" alt="" /></div>
	<div class="image"><img src="2.jpg" alt="" /></div>
	<div class="image"><img src="3.jpg" alt="" /></div>
	<div class="image"><img src="4.jpg" alt="" /></div>
	<div class="image"><img src="5.jpg" alt="" /></div>
	<div class="image"><img src="6.jpg" alt="" /></div>
	<div class="image"><img src="7.jpg" alt="" /></div>
	<div class="image"><img src="8.jpg" alt="" /></div>
	<div class="image"><img src="9.jpg" alt="" /></div>
	<div class="image"><img src="10.jpg" alt="" /></div>
	<div class="image"><img src="11.jpg" alt="" /></div>
	<div class="image"><img src="12.jpg" alt="" /></div>
	<div class="image"><img src="13.jpg" alt="" /></div>
	<div class="image"><img src="14.jpg" alt="" /></div>
	<div class="image"><img src="15.jpg" alt="" /></div>
	<div class="image"><img src="16.jpg" alt="" /></div>
	<div class="image"><img src="17.jpg" alt="" /></div>
	<div class="image"><img src="18.jpg" alt="" /></div>
</div>

The CSS

#gallery {
	width: 900px;
	float: left;
}
.image, .image img {
	width: 150px;
	height: 150px;
	float: left;
}

The jQuery

(function($) {
	$.fn.flipgallery = function() {

		var choose = 8;
		var duration = 300;
		var images = $(this).find('img');

		function flip() {
			// choose random numbers between 0 and numberofimages -1
			var numbers = new Array();
			while (numbers.length < choose) {
				var number = Math.round(Math.random() * images.length - 1);
				if (jQuery.inArray(number, numbers) === -1) {
					numbers.push(number);
				}
			}

			var urls = new Array();

			$(numbers).each(function(index, value) {
				var width = $(images[this]).width();
				var height = $(images[this]).height();
				var margin = $(images[this]).width() / 2;
				var reverse = numbers.length - 1 - index;

				// save urls so they don't get overwritten
				urls.push($(images[value]).attr('src'));

				$(images[value]).stop().animate({width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5'}, {duration: duration});
				window.setTimeout(function() {
					$(images[value]).attr('src', urls[reverse]);
					$(images[value]).stop().animate({width: width, height: '' + height + 'px', marginLeft: '0px', opacity: '1'}, {duration: duration});
				}, duration);
			});

		}

		setInterval(flip, 3000);

	};

})(jQuery);

$(document).ready(function() {

	if ($('#gallery').length > 0) {
		$('#gallery').flipgallery();
	}

});

The fixed width DIV’s around the images are necessary to prevent the layout from collapsing since the image flipping is done by reducing image width.

Click here for a demo.