ImageCloud - a 2.5D Javascript Gallery

Inspired by some various Flash-Galleries, here is a little experiment that shows, that this is also possible with HTML, CSS and Javascript. Using the Javascript-Library JQuery makes it very easy to get and modify the styles of the desired Elements. Click of one of the images to zoom in. To zoom out click on the same image again. It ist not tested in all Browsers and Operation Systems. Bugs may occur in some cases.

Javascript

$().ready( function()
{
	var focalLength = 300;
	var screenWidth = $( "#container" ).width();
	var screenHeight = $( "#container" ).height();
	var centerX = screenWidth * 0.5;
	var centerY = screenHeight * 0.5;
	var centerZ = focalLength;
	var lastClickedClip = null;
	
	var camera = {};
	camera.x = centerX;
	camera.y = centerY;
	camera.z = 0;
	camera.dx = centerX;
	camera.dy = centerY;
	camera.dz = 0;
	camera.zoomSpeed = 0.1;

	var clips = $( "#container div" );
	clips.each( function( i, clip )
	{
		clip.x = Math.round( Math.random() * screenWidth );
		clip.y = Math.round( Math.random() * screenHeight );
		clip.z = clip.depth = Math.abs( centerZ - Math.round( Math.random() * focalLength ) );
		clip.width = $( clip ).width();
		clip.height = $( clip ).height();
		clip.zoomIn = true;
		clip.overlay = $( clip ).find( "span" );
		$( clip ).click( function()
		{
			var nx = this.zoomIn ? this.x - this.scaledWidth * .5 : centerX;
			var ny = this.zoomIn ? this.y - this.scaledHeight * .5 : centerY;
			var nz = this.zoomIn ? this.depth - focalLength * 1.4 : 0;
			
			camera.x = nx;
			camera.y = ny;
			camera.z = nz;

			this.zoomIn = !this.zoomIn;

			if ( lastClickedClip && lastClickedClip != this ) lastClickedClip.zoomIn = true;
			lastClickedClip = this;
		});
	});
	
	function intervalCallback()
	{
		camera.dx -= ( camera.dx - camera.x ) * camera.zoomSpeed;
		camera.dy -= ( camera.dy - camera.y ) * camera.zoomSpeed;
		camera.dz -= ( camera.dz - camera.z ) * camera.zoomSpeed;

		clips.each( function( i, clip )
		{
			var scale = focalLength / Math.max( 1, ( focalLength + clip.z ) );

			clip.scaledWidth = clip.width * scale;
			clip.scaledHeight = clip.height * scale;
			clip.z = centerZ + ( camera.dz - clip.depth );
			$( clip.overlay ).css( "opacity", 0.8 * clip.z / centerZ );
			$( clip ).css( "width", clip.scaledWidth );
			$( clip ).css( "height", clip.scaledHeight );
			$( clip ).css( "left", centerX + scale * ( camera.dx - clip.x ) );
			$( clip ).css( "top", centerY + scale * ( camera.dy - clip.y ) );
			$( clip ).css( "zIndex", Math.round( clip.depth ) );
		});
	}

	window.setInterval( intervalCallback, 25 );
});

CSS

img
{
	width: 100%;
	height: 100%;
	float: left;
}

#container div
{
	width:50px;
	height:50px;
	background-color:#cccccc;
	position:absolute;
}

#container
{
	width: 636px;
	height: 400px;
	overflow: hidden;
	position: absolute;
}

.overlay
{
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	position: absolute;
	float: left;
	opacity: 1;
}

HTML