(function($){ $.fn.extend({ hoverZoom: function(settings) { var defaults = { overlay: true, overlayColor: '#2e9dbf', overlayOpacity: 0.9, zoom: 25, speed: 300 }; var settings = $.extend(defaults, settings); return this.each(function() { var s = settings; var hz = $(this); var image = $('img', hz); image.load(function() { if(s.overlay === true) { $(this).parent().append('
'); $(this).parent().find('.zoomOverlay').css({ opacity:0, display: 'block', backgroundColor: s.overlayColor }); } var width = $(this).width(); var height = $(this).height(); $(this).fadeIn(1000, function() { $(this).parent().css('background-image', 'none'); hz.hover(function() { $('img', this).stop().animate({ height: height + s.zoom, marginLeft: -(s.zoom), marginTop: -(s.zoom) }, s.speed); if(s.overlay === true) { $(this).parent().find('.zoomOverlay').stop().animate({ opacity: s.overlayOpacity }, s.speed); } }, function() { $('img', this).stop().animate({ height: height, marginLeft: 0, marginTop: 0 }, s.speed); if(s.overlay === true) { $(this).parent().find('.zoomOverlay').stop().animate({ opacity: 0 }, s.speed); } }); }); }); }); } }); })(jQuery);