minimal image enlarge

1-enlarge.js

// intercept rel=image clicks and make images fade in over the top
$$('a[rel=image]').each(function(link){
	link.observe('click',function(e){
		Event.stop(e);
		i = new Element('img');
		i.observe('load',function(){
			$('image_mask').appear()
		})
		// do this afterwards for IE
		i.writeAttribute('src',$(this).readAttribute('href'));
		$('image_mask').update(i);
	}.bindAsEventListener(link))
})
//hide the image when the page is clicked
$('image_mask').observe('click',function(){
	$('image_mask').fade({afterFinish:function(){
		//once hidden, remove it
		$('image_mask').update('');
	}})
})

2-enlarge.html

<div id="image_mask" style="display:none"></div>
<a href="the-image.jpg" rel="image"><img src="the-thumbnail.jpg" /></a>

3-enlarge.css

#image_mask {
	text-align:center;
	background-color:#fff;
	width:100%;
	height:100%;
	position:absolute;
}
#image_mask img{
	margin:auto;
	padding: 40px 0 40px 0;
}