sergofedor06,
всё это можно сделать на css ... используйте актуальное, а не старое с ошибками
<html>
<head>
<link rel="stylesheet" href="http://thefinishedbox.com/files/freebies/hoverzoom/css/style.css?v=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function($) {
$.fn.extend({
hoverZoom: function(settings) {
var defaults = {
overlay: true,
overlayColor: "#2e9dbd",
overlayOpacity: .7,
zoom: 25,
speed: 300
};
var settings = $.extend(defaults, settings);
return this.each(function() {
var s = settings;
var hz = $(this);
var image = $("img", hz);
var overley = $('<div class="zoomOverlay" />');
image.load(function() {
if (s.overlay === true) {
hz.append(overley);
overley.css({
opacity: 0,
display: "block",
backgroundColor: s.overlayColor
})
}
var height = image.height();
image.fadeIn(2000);
hz.hover(function() {
image.stop(true,true).animate({
height: height + s.zoom,
marginLeft: -s.zoom,
marginTop: -s.zoom
}, s.speed);
if (s.overlay === true) overley.stop().animate({
opacity: s.overlayOpacity
}, s.speed)
}, function() {
image.stop(true,true).animate({
height: height,
marginLeft: 0,
marginTop: 0
}, s.speed);
if (s.overlay === true) overley.stop().animate({
opacity: 0
}, s.speed)
})
});
image[0].complete && image.load()
})
}
})
})(jQuery);
</script>
<script>
$(function() {
$('.zoom').hoverZoom()
});
</script>
</head>
<body>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom" id="blue"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" alt="thumbnail" /></a>
</body>
</html>