Skip to content

Instantly share code, notes, and snippets.

@jremmen
Last active August 29, 2015 14:02
Show Gist options
  • Save jremmen/7c52ac76deafdf4c72be to your computer and use it in GitHub Desktop.
Save jremmen/7c52ac76deafdf4c72be to your computer and use it in GitHub Desktop.
jquery: zoomblo, light weight image zoomer
(function($) {
$.fn.zoomblo = function(full) {
$(this).css({
position: 'relative',
overflow: 'hidden'
});
var org = {
h: $(this).find('img').height(),
w: $(this).find('img').width()
};
var zoom = $('<img>').attr('src', full)
.css({
position: 'absolute',
left: $(this).css('paddingLeft'),
top: $(this).css('paddingTop'),
opacity: 0
});
function show_zoom() {
zoom.css({opacity: 1});
}
function hide_zoom() {
zoom.css({opacity: 0});
}
function move_zoom(e) {
var x = e.pageX - $(this).offset().left,
y = e.pageY - $(this).offset().top;
zoom.css({
top: -1 * ((zoom.h - org.h) * (y / org.h)),
left: -1 * ((zoom.w - org.w - 30) * (x / org.w))
});
}
function get_dimensions(e) {
zoom.w = e.target.naturalWidth;
zoom.h = e.target.naturalHeight;
}
return this.each(function() {
$(this).append(zoom);
zoom.on('load', get_dimensions);
$(this).on('mouseenter', show_zoom);
$(this).on('mouseleave', hide_zoom);
$(this).on('mousemove', move_zoom);
});
}
})(jQuery)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment