$(window).load(function(){

//задаем некоторые переменные
var thumbnail = {
imgIncrease : 0, /* увеличение изображения в пикселях для зума */
effectDuration : 250, /* продолжительность эффекта для зума и надписи */

/*
Взять ширину и высоту изображений. Используется для 2-х вещей
1) сделать все элементы списка одного размера 2) вернуть изображения
к первоначальным размерам после зума
*/
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
imgHeight : $('.thumbnailWrapper ul li').find('img').height()


};


//Элементы списка того же размера, что и изображения
$('.thumbnailWrapper ul li').css({ 


'width' : thumbnail.imgWidth,
'height' : thumbnail.imgHeight 


});


//при наведении мышки на элемент...
$('.thumbnailWrapper ul li').hover(function(){


$(this).find('img').stop().animate({


/* увеличить ширину изображения для зума*/
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
/* нам необходимо изменить левое и верхнее позиционирование
для зума, и поэтому мы придаем им отрицательные значения
 */
left: thumbnail.imgIncrease/2*(0),
top: thumbnail.imgIncrease/2*(0)

},{ 


"duration": thumbnail.effectDuration,
"queue": false


});

//показать надпись м помощью события slideDown
$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);


//когда мышку уводят...
}, function(){


//найти изображение и анимировать его...
$(this).find('img').animate({


/* вернуть первоначальный размер */
width: thumbnail.imgWidth,
/* get left and top positions back to normal */
left: 0,
top: 0

}, thumbnail.effectDuration);

//спрятать надпись с помощью события slideUp
$(this).find('.caption').slideUp(thumbnail.effectDuration);

});
});