[FAQ] MaxiGallery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	$$('.boxcontent img').each(function(item) {
		item.initWidth = parseInt(item.get('width'));
		item.initHeight = parseInt(item.get('height'));
		item.set('morph', {duration: 100});
		var widthEnlarge = 10;
		var heightEnlarge = 10;
		var leftOffset = -parseInt(widthEnlarge / 2);
		var topOffset = -parseInt(heightEnlarge / 2);
		item.addEvent('mouseenter', function() {
			this.morph({
				width: [this.initWidth, this.initWidth + widthEnlarge],
				height:[this.initHeight, this.initHeight + heightEnlarge],
				top: topOffset,
				left: leftOffset,
				marginBottom: -heightEnlarge,
				marginRight: -widthEnlarge
			});
		}).addEvent('mouseleave', function() {
			item = this;
			(function(){item.morph({
				width: [item.initWidth + widthEnlarge, item.initWidth],
				height: [item.initHeight + heightEnlarge, item.initHeight],
				top: 0,
				left: 0,
				marginBottom: 0,
				marginRight:0
			});}).delay(100);
		})
	});
});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
	$('.boxcontent img').each(function() {
		this.initWidth = this.width;
		this.initHeight = this.height;
		var widthEnlarge = 10;
		var heightEnlarge = 10;
		var leftOffset = -parseInt(widthEnlarge / 2);
		var topOffset = -parseInt(heightEnlarge / 2);
		$(this).hover(function() {
			$(this).animate({
				width: this.initWidth + widthEnlarge,
				height: this.initHeight + heightEnlarge,
				top: topOffset,
				left: leftOffset,
				marginBottom: -heightEnlarge,
				marginRight: -widthEnlarge
			},100);
		},function() {
			$(this).animate({
				width: this.initWidth,
				height: this.initHeight,
				top: 0,
				left: 0,
				marginBottom: 0,
				marginRight:0
			},100);
		})
	});
});
</script>

<style type="text/css">.boxcontent img {position:relative;}</style>

<script type="text/javascript"> 
window.addEvent('domready', function() {
	$$('img.thumbnail').each(function(item) {
		item.initWidth = parseInt(item.width);
		item.initHeight = parseInt(item.height);
		var morph = item.effects({duration: 100});
		var widthEnlarge = 10;
		var heightEnlarge = 10;
		item.addEvent('mouseenter', function() {
			morph.start({
				width: [this.initWidth, this.initWidth + widthEnlarge],
				height:[this.initHeight, this.initHeight + heightEnlarge],
				marginBottom: -heightEnlarge,
				marginRight: -widthEnlarge
			});
		}).addEvent('mouseleave', function() {
			item = this;
			(function(){morph.start({
				width: [item.initWidth + widthEnlarge, item.initWidth],
				height: [item.initHeight + heightEnlarge, item.initHeight],
				marginBottom: 0,
				marginRight:0
			});}).delay(100);
		})
	});
});
</script> 
<style type="text/css">img.thumbnail {position:relative;}</style>