$(document).ready(function() {

    //move the image in pixel
    var move = -15;

    //zoom percentage, 1.2 =120%
    var zoom = 1.2;
    var orginalwidth;
    var orginalheight;

    //On mouse over those thumbnail
    $('.zitem').hover(function() {
        //Set the width and height
        if ($(this).find('img').attr('orginalwidth') == null) {
            $(this).find('img').attr('orginalwidth', $(this).find('img').width())
            $(this).find('img').attr('orginalheight', $(this).find('img').height())
            orginalwidth = $(this).find('img').width();
            orginalheight = $(this).find('img').height();
        } else {
            orginalwidth = $(this).find('img').attr('orginalwidth');
            orginalheight = $(this).find('img').attr('orginalheight');
        }

        //Set the width and height according to the zoom percentage
        width = $(this).find('img').width() * zoom;
        height = $(this).find('img').height() * zoom;

        //Move and zoom the image
        if (width == (orginalwidth * zoom)) {
            $(this).find('img').stop(false, true).animate({ 'width': width, 'height': height, 'top': move, 'left': move }, { duration: 200 });
        }
    },
	function() {
	    //Reset the image
	    $(this).find('img').stop(false, true).animate({ 'width': orginalwidth, 'height': orginalheight, 'top': '0', 'left': '0' }, { duration: 100 });
	});

});