$(document).ready(function() {
//zoom percentage, 1.2 =120%
var zoom = 2;

//On mouse over those thumbnail
$('.zitem').hover(function() {
var movet = -$(this).find('img').height();
var movel = -$(this).find('img').width()/2;
imgwidth = $(this).find('img').width();
imgheight = $(this).find('img').height();
width = imgwidth * zoom;
height = imgheight * zoom;

//Move and zoom the image
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop().animate({'width':width, 'height':height, 'top':movet, 'left':movel}, {duration:200});
},

//Reset the image
function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop().animate({'width':imgwidth, 'height':imgheight, 'top':'0', 'left':'0'}, {duration:100});
});

$('.zitem2').hover(function() {
var movet = -$(this).find('img').height();
var movel = -$(this).find('img').width();
imgwidth = $(this).find('img').width();
imgheight = $(this).find('img').height();
width = imgwidth * zoom;
height = imgheight * zoom;

//Move and zoom the image
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop().animate({'width':width, 'height':height, 'top':movet, 'left':movel}, {duration:200});
},

//Reset the image
function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop().animate({'width':imgwidth, 'height':imgheight, 'top':'0', 'left':'0'}, {duration:100});
});
});