├── loupe-trans.png ├── README ├── sample.html └── jquery.jloupe.js /loupe-trans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cviebrock/jLoupe/master/loupe-trans.png -------------------------------------------------------------------------------- /README: -------------------------------------------------------------------------------- 1 | jQuery Loupe v1.3 2 | 3 | http://chrisiufer.com/loupe/ 4 | 5 | Copyright (C) 2010 Chris Iufer 6 | 7 | This program is free software: you can redistribute it and/or modify 8 | it under the terms of the GNU General Public License as published by 9 | the Free Software Foundation, either version 3 of the License, or 10 | (at your option) any later version. 11 | 12 | This program is distributed in the hope that it will be useful, 13 | but WITHOUT ANY WARRANTY; without even the implied warranty of 14 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 15 | GNU General Public License for more details. 16 | 17 | You should have received a copy of the GNU General Public License 18 | along with this program. If not, see -------------------------------------------------------------------------------- /sample.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | jLoupe Sample 8 | 9 | 10 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |

jLoupe 1.3

30 |

By Chris Iufer chris@iufer.com

31 |
32 | 33 |

Requires jQuery 1.4+

34 | 35 |

Download from Github

36 | 37 |
38 | Example 1: Scaled Thumbnail 39 |

an image scaled using the width or height attribute

40 | 41 | 42 | 
<img src="largesize.jpg" width="256" class="jLoupe">
43 |
44 | 45 |
46 | Example 2: Linked Thumbnail 47 |

a thumbnail image with a fullsize image set as the link href

48 | 49 | 50 | 51 | 
<a href="largesize.jpg"><img src="thumbnail.jpg" class="jLoupe"></a>
52 |
53 | 54 |
55 | Example 3: Custom Loupe Image 56 | 57 | 58 | 64 | 
<a href="largesize.jpg"><img src="thumbnail.jpg" id="custom"></a>
65 | 
$('#custom').jloupe({radiusLT:100, margin:12, color:'none', image:'loupe-trans.png'});
66 |
67 | 68 |
69 | Example 4: Custom Size and Shape 70 | 71 | 72 | 77 | 
<a href="largesize.jpg"><img src="thumbnail.jpg" id="shape"></a>
78 | 
$('#shape').jloupe({radiusLT:0, radiusRT:10, radiusRB:0, radiusLB:10, width:300, height:150, color:'#f2730b'});
79 |
80 | 81 |

Configurable Options

82 | 95 | 96 |

Current version 1.3 (20100831)

97 | 98 | 99 | -------------------------------------------------------------------------------- /jquery.jloupe.js: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery Loupe v1.3 3 | Copyright (C) 2010 Chris Iufer (chris@iufer.com) 4 | 5 | This program is free software: you can redistribute it and/or modify 6 | it under the terms of the GNU General Public License as published by 7 | the Free Software Foundation, either version 3 of the License, or 8 | (at your option) any later version. 9 | 10 | This program is distributed in the hope that it will be useful, 11 | but WITHOUT ANY WARRANTY; without even the implied warranty of 12 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 | GNU General Public License for more details. 14 | 15 | You should have received a copy of the GNU General Public License 16 | along with this program. If not, see 17 | 18 | */ 19 | 20 | jQuery.fn.jloupe = function(o){ 21 | var version = '1.3'; 22 | var options = { 23 | width:200, 24 | height:200, 25 | margin:6, 26 | cursorOffsetX:10, 27 | cursorOffsetY:10, 28 | radiusLT:0, 29 | radiusLB:100, 30 | radiusRT:100, 31 | radiusRB:100, 32 | borderColor: '#333', 33 | backgroundColor: '#fff', 34 | image: false, 35 | repeat: false 36 | }; 37 | 38 | if(o) jQuery.extend(options, o); 39 | 40 | var loupe = $('
').addClass('thejloupe') 41 | .css('position','absolute') 42 | .css('width',options.width +'px') 43 | .css('height',options.height +'px') 44 | .hide() 45 | .appendTo('body'); 46 | 47 | if(options.borderColor) loupe.css('backgroundColor', options.borderColor); 48 | 49 | 50 | if(options.repeat) loupe.css('backgroundRepeat', 'repeat'); 51 | else loupe.css('backgroundRepeat', 'no-repeat'); 52 | 53 | var view = $('
').addClass('thejloupeview') 54 | .css('width',options.width-options.margin*2 +'px') 55 | .css('height',options.height-options.margin*2 +'px') 56 | .css('backgroundRepeat','no-repeat') 57 | .css('marginLeft', options.margin +'px') 58 | .css('marginTop', options.margin +'px') 59 | .appendTo(loupe); 60 | 61 | if(options.backgroundColor) view.css('backgroundColor', options.backgroundColor); 62 | 63 | if($.support.cssProperty('borderRadius')){ 64 | if(options.image) loupe.css('backgroundImage', 'url('+ options.image +')'); 65 | 66 | $(view) 67 | .css('border-top-left-radius', options.radiusLT) 68 | .css('border-bottom-left-radius', options.radiusLB) 69 | .css('border-bottom-right-radius', options.radiusRB) 70 | .css('border-top-right-radius', options.radiusRT) 71 | .css('-moz-border-radius-topleft', options.radiusLT) 72 | .css('-moz-border-radius-bottomright', options.radiusRB) 73 | .css('-moz-border-radius-bottomleft', options.radiusLB) 74 | .css('-moz-border-radius-topright', options.radiusRT); 75 | if(!options.image || options.repeat) { 76 | $(loupe) 77 | .css('border-top-left-radius', options.radiusLT) 78 | .css('border-bottom-left-radius', options.radiusLB) 79 | .css('border-bottom-right-radius', options.radiusRB) 80 | .css('border-top-right-radius', options.radiusRT) 81 | .css('-moz-border-radius-topleft', options.radiusLT) 82 | .css('-moz-border-radius-bottomright', options.radiusRB) 83 | .css('-moz-border-radius-bottomleft', options.radiusLB) 84 | .css('-moz-border-radius-topright', options.radiusRT); 85 | } 86 | } 87 | 88 | $(this).each(function(){ 89 | var h = $(this).parent('a').attr('href'); 90 | var s = $(this).attr('src'); 91 | s = (h) ? h : s; 92 | var i = $('').attr('src', s); 93 | $(this).data('zoom',i); 94 | }) 95 | .bind('mousemove', function(e){ 96 | var o = $(this).offset(); 97 | var i = $(this).data('zoom'); 98 | var posx = 0, posy = 0; 99 | if(e.pageX || e.pageY){ 100 | posx = e.pageX; 101 | posy = e.pageY; 102 | } 103 | else if(e.clientX || e.clientY){ 104 | posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 105 | posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 106 | } 107 | $(loupe).offset({top:posy+options.cursorOffsetY, left:posx+options.cursorOffsetX}); 108 | 109 | zlo = (((posx - o.left) / this.width) * $(i).attr('width') *-1) + (options.width/2.5); 110 | zto = (((posy - o.top) / this.height) * $(i).attr('height') *-1) + (options.height/2.5); 111 | 112 | $(view).css('backgroundImage', 'url('+ $(i).attr('src') +')').css('backgroundPosition', zlo+'px ' + zto+'px'); 113 | }) 114 | .bind('mouseleave', function(){ 115 | $(loupe).stop(true, true).fadeOut(100); 116 | }) 117 | .bind('mouseenter', function(){ 118 | $(loupe).stop(true, true).fadeIn(); 119 | }); 120 | 121 | return this; 122 | }; 123 | 124 | 125 | $.support.cssProperty = (function() { 126 | function cssProperty(p, rp) { 127 | var b = document.body || document.documentElement; 128 | var s = b.style; 129 | if(typeof s == 'undefined') { return false; } 130 | if(typeof s[p] == 'string') { return rp ? p : true; } 131 | var v = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms']; 132 | p = p.charAt(0).toUpperCase() + p.substr(1); 133 | for(var i=0; i