$(window).load(function(){   
  
    //set and get some variables   
    var thumbnail = {   
        imgIncrease : 50, /* the image increase in pixels (for zoom) */  
        effectDuration : 400, /* the duration of the effect (zoom and caption) */  
        /*  
        get the width and height of the images. Going to use those  
        for 2 things:  
            make the list items same size  
            get the images back to normal after the zoom  
        */  
        imgWidth : $('.thumbnailWrapper ul li').find('img').width(),   
        imgHeight : $('.thumbnailWrapper ul li').find('img').height()   
  
    };   
  
    //make the list items same size as the images   
    $('.thumbnailWrapper ul li').css({   
  
        'width' : thumbnail.imgWidth,   
        'height' : thumbnail.imgHeight   
  
    });   
  
    //when mouse over the list item...   
    $('.thumbnailWrapper ul li').hover(function(){   
  
        $(this).find('img').stop().animate({   
  
            /* increase the image width for the zoom effect*/  
            width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,   
            /* we need to change the left and top position in order to  
            have the zoom effect, so we are moving them to a negative  
            position of the half of the imgIncrease */  
            left: thumbnail.imgIncrease/2*(-1),   
            top: thumbnail.imgIncrease/2*(-1)   
  
        },{   
  
            "duration": thumbnail.effectDuration,   
            "queue": false  
  
        });   
  
        //show the caption using slideDown event   
        $(this).find('.caption:not(:animated)').fadeIn(thumbnail.effectDuration);   
  
    //when mouse leave...   
    }, function(){   
  
        //find the image and animate it...   
        $(this).find('img').animate({   
  
            /* get it back to original size (zoom out) */  
            width: thumbnail.imgWidth,   
            /* get left and top positions back to normal */  
            left: 0,   
            top: 0   
  
        }, thumbnail.effectDuration);   
  
        //hide the caption using slideUp event   
        $(this).find('.caption').slideUp(thumbnail.effectDuration);   
  
    });   
  
});