Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Loupe can now be toggled

$(selector).loupe(false); => loupe disabled
$(selector).loupe(false); => loupe re-enabled
  • Loading branch information...
commit f2a149cafa05188cdadefba3a994958ac96acc57 1 parent f51a601
@redoPop redoPop authored
Showing with 46 additions and 57 deletions.
  1. +44 −57 jquery.loupe.js
  2. +2 −0  jquery.loupe.min.js
View
101 jquery.loupe.js
@@ -1,82 +1,69 @@
/**
* loupe - an image magnifier for jQuery
+ * (C) 2010 jdbartlett, MIT license
* http://github.com/jdbartlett/loupe
*/
(function ($) {
- $.fn.loupe = function (options) {
- if (!this.length) {
- return this;
- }
-
- options = $.extend({
+ $.fn.loupe = function (arg) {
+ var options = $.extend({
loupe: 'loupe',
width: 200,
height: 150
- }, options || {});
+ }, arg || {}), undefined;
- this.each(function () {
- var $this = $(this),
- loupe, big, small, time,
- hide, move;
+ return this.length ? this.each(function () {
+ var $this = $(this), $big, $loupe,
+ $small = $this.is('img') ? $this : $this.find('img:first'),
+ move, hide = function () { $loupe.hide(); },
+ time;
- hide = function () {
- loupe.hide();
- };
+ if ($this.data('loupe') !== undefined) {
+ return $this.data('loupe', arg);
+ }
move = function (e) {
- var os, sW, sH, oW, oH;
-
- os = small.offset();
- sW = small.outerWidth();
- sH = small.outerHeight();
- oW = options.width / 2;
- oH = options.height / 2;
+ var os = $small.offset(),
+ sW = $small.outerWidth(),
+ sH = $small.outerHeight(),
+ oW = options.width / 2,
+ oH = options.height / 2;
- if (e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 ||
+ if (!$this.data('loupe') ||
+ e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 ||
e.pageY > sH + os.top + 10 || e.pageY < os.top - 10) {
return hide();
}
- if (time && clearTimeout(time)) {
- time = null;
- }
+ time = time ? clearTimeout(time) : 0;
- loupe.css({
+ $loupe.show().css({
left: e.pageX - oW,
top: e.pageY - oH
});
- big.css({
- left: -(((e.pageX - os.left) / sW) * big.width() - oW)|0,
- top: -(((e.pageY - os.top) / sH) * big.height() - oH)|0
+ $big.css({
+ left: -(((e.pageX - os.left) / sW) * $big.width() - oW)|0,
+ top: -(((e.pageY - os.top) / sH) * $big.height() - oH)|0
});
};
-
- $this.mouseenter(function (e) {
- if (!small) {
- small = $this.is('img') ? $this : $this.find('img:first');
- }
-
- loupe = (loupe || (loupe = $('<div></div>')
- .addClass(options.loupe)
- .css({
- width: options.width,
- height: options.height,
- position: 'absolute',
- overflow: 'hidden'
- })
- .append(big = $('<img src="' + $this.attr($this.is('img') ? 'src' : 'href') + '" />').css({
- position: 'absolute'
- }))
- .mousemove(move)
- .appendTo('body')
- )).show();
-
- move(e);
- }).mouseout(function () {
- time = setTimeout(hide, 10);
- });
- });
-
- return this;
+
+ $loupe = $('<div />')
+ .addClass(options.loupe)
+ .css({
+ width: options.width,
+ height: options.height,
+ position: 'absolute',
+ overflow: 'hidden'
+ })
+ .append($big = $('<img />').attr('src', $this.attr($this.is('img') ? 'src' : 'href')).css('position', 'absolute'))
+ .mousemove(move)
+ .hide()
+ .appendTo('body');
+
+ $this.data('loupe', true)
+ .mouseenter(move)
+ .mouseout(function () {
+ time = setTimeout(hide, 10);
+ });
+ }) : this;
};
}(jQuery));
View
2  jquery.loupe.min.js
@@ -0,0 +1,2 @@
+// ©2010 jdbartlett, MIT license
+(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:150},b||{}),d;return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!==d){return j.data("loupe",b)}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));
Please sign in to comment.
Something went wrong with that request. Please try again.