$(document).ready(function() {

	//move the image in pixel
	var move = 0;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.1;

	//On mouse over those thumbnail
	$('.zitem2').hover(function() {
		
		//Set the width and height according to the zoom percentage
		width = $('.zitem2').width() * zoom;
		height = $('.zitem2').height() * zoom;
		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption2').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.zitem2').width(), 'height':$('.zitem2').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption2').stop(false,true).fadeOut(200);
	});

});

$(document).ready(function() {

	//move the image in pixel
	var move = 0;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.1;

	//On mouse over those thumbnail
	$('.zitem1').hover(function() {
		
		//Set the width and height according to the zoom percentage
		width = $('.zitem1').width() * zoom;
		height = $('.zitem1').height() * zoom;
		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption1').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.zitem1').width(), 'height':$('.zitem1').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption1').stop(false,true).fadeOut(200);
	});

});



$(document).ready(function() {

	//move the image in pixel
	var move = 0;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.1;

	//On mouse over those thumbnail
	$('.zitem3').hover(function() {
		
		//Set the width and height according to the zoom percentage
		width = $('.zitem3').width() * zoom;
		height = $('.zitem3').height() * zoom;
		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption3').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.zitem3').width(), 'height':$('.zitem3').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption3').stop(false,true).fadeOut(200);
	});

});