blog-contributions/assets/js/hover.zoom.js
2024-05-02 09:54:49 +02:00

68 lines
2.3 KiB
JavaScript

(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('<div class="zoomOverlay" />');
$(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);