Permalink
Browse files

added support for shrunken images

<img src="bigimage" width="190" height="220" /> now works.
  • Loading branch information...
1 parent b9020c1 commit 7a0659bdd9fe9a7cd20ae1be217817c0b9f3c992 @redoPop redoPop committed Dec 10, 2009
Showing with 9 additions and 14 deletions.
  1. +3 −1 README
  2. +6 −6 jquery.loupe.js
  3. +0 −7 jquery.loupe.min.js
View
4 README
@@ -1 +1,3 @@
-loupe is a lightweight onhover image magnifier for jQuery.
+loupe is a lightweight onhover image magnifier for jQuery.
+
+see here for demos & instructions: http://jdbartlett.github.com/loupe
View
@@ -1,6 +1,6 @@
/**
* loupe - an image magnifier for jQuery
- * http://jdbartlett.github.com/loupe.html
+ * http://github.com/jdbartlett/loupe
*/
(function($) {
$.fn.loupe = function(options) {
@@ -10,7 +10,7 @@
width: 200,
height: 150
}, options || {});
-
+
this.each(function() {
var $this = $(this), loupe = null, big = null, small = null,
move = function(e) {
@@ -28,16 +28,16 @@
top: -(((e.pageY - offset.top) / smallHeight) * big.height() - options.height/2)|0
});
}
-
+
$this.mouseenter(function(e) {
- if (!small) small = ($this.is('img') ? $this : $this.find('img:first'));
+ if (!small) small = $this.is('img') ? $this : $this.find('img:first');
loupe = (loupe || (loupe = $('<div></div>')
.addClass(options.loupe)
.css({
width:options.width+'px', height:options.height+'px',
position:'absolute', overflow:'hidden'
})
- .append(big = $('<img src="' + $this.attr('href') + '" />').css({position:'absolute'}))
+ .append(big = $('<img src="' + $this.attr($this.is('img') ? 'src' : 'href') + '" />').css({position:'absolute'}))
.mousemove(move)
.appendTo('body')
)).show();
@@ -46,7 +46,7 @@
return false;
});
});
-
+
return this;
}
})(jQuery);
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 7a0659b

Please sign in to comment.