Skip to content
Browse files

Added 'grab' option.

  • Loading branch information...
1 parent d738fbc commit 57da5a113a9afe44cae0619df1efb46cf276d672 Jack Moore committed
Showing with 90 additions and 26 deletions.
  1. +7 −3 demo.html
  2. BIN grab.cur
  3. BIN grabbed.cur
  4. +1 −2 jquery.zoom-min.js
  5. +78 −20 jquery.zoom.js
  6. +4 −1 readme.md
View
10 demo.html
@@ -22,20 +22,24 @@
.zoom img {
display: block;
}
+
+ #ex2 img:hover { cursor: url(grab.cur), default; }
+ #ex2 img:active { cursor: url(grabbed.cur), default; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function(){
- $('span').zoom();
+ $('#ex1').zoom();
+ $('#ex2').zoom({ grab: true });
});
</script>
</head>
<body>
- <span class='zoom'>
+ <span class='zoom' id='ex1'>
<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
</span>
- <span class='zoom'>
+ <span class='zoom' id='ex2'>
<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
</span>
</body>
View
BIN grab.cur
Binary file not shown.
View
BIN grabbed.cur
Binary file not shown.
View
3 jquery.zoom-min.js
@@ -1,5 +1,4 @@
// Zoom 1.0 - jQuery image zooming plugin
// (c) 2011 Jack Moore - jacklmoore.com
// license: www.opensource.org/licenses/mit-license.php
-
-(function(a){var b={url:!1,icon:!0,duration:120};a.fn.zoom=function(c){return this.each(function(){var d=this,e=a(d),f=new Image,g=a(f),h,i=e.css("position"),j=a.extend({},b,c||{});e.css({position:/(absolute|fixed)/.test(i)?i:"relative",overflow:"hidden"});if(!j.url){j.url=e.find("img:first")[0].src;if(!j.url)return}j.icon&&(h=a('<div class="zoomIcon">').appendTo(e)),f.onload=function(){function k(){b=e.outerWidth(),c=e.outerHeight(),h=-(f.width-b)/b,i=-(f.height-c)/c}var b,c,h,i;k(),g.addClass("zoomImg").css({position:"absolute",top:0,left:0,opacity:0,width:f.width,height:f.height,border:"none"}).hover(function(){k(),g.stop().fadeTo(a.support.opacity?j.duration:0,1)},function(){g.stop().fadeTo(j.duration,0)}).mousemove(function(a){f.style.left=(a.pageX-d.offsetLeft)*h+"px",f.style.top=(a.pageY-d.offsetTop)*i+"px"}).appendTo(e)},f.src=j.url})},a.fn.zoom.defaults=b})(jQuery);
+(function(a){var b={url:!1,icon:!0,grab:!1,duration:120};a.fn.zoom=function(c){return this.each(function(){var d=this,e=a(d),f=new Image,g=a(f),h,i=e.css("position"),j=a.extend({},b,c||{}),k="mousemove";e.css({position:/(absolute|fixed)/.test(i)?i:"relative",overflow:"hidden"});if(!j.url){j.url=e.find("img:first")[0].src;if(!j.url)return}j.icon&&(h=a('<div class="zoomIcon">').appendTo(e)),f.onload=function(){function n(){b=e.outerWidth(),c=e.outerHeight(),h=(f.width-b)/b,i=(f.height-c)/c}function o(a){l=a.pageX-d.offsetLeft,m=a.pageY-d.offsetTop,l>b?l=b:l<0&&(l=0),m>c?m=c:m<0&&(m=0),f.style.left=l*-h+"px",f.style.top=m*-i+"px",a.preventDefault()}var b,c,h,i,l,m;n(),g.addClass("zoomImg").css({position:"absolute",top:0,left:0,opacity:0,width:f.width,height:f.height,border:"none"}).appendTo(e),j.grab?g.mousedown(function(b){a(document).one("mouseup",function(){g.stop().fadeTo(j.duration,0),a(document).unbind(k,o)}),n(),o(b),g.stop().fadeTo(a.support.opacity?j.duration:0,1),a(document)[k](o),b.preventDefault()}):g.hover(function(){n(),g.stop().fadeTo(a.support.opacity?j.duration:0,1)},function(){g.stop().fadeTo(j.duration,0)})[k](function(a){f.style.left=(a.pageX-d.offsetLeft)*-h+"px",f.style.top=(a.pageY-d.offsetTop)*-i+"px"})},f.src=j.url})},a.fn.zoom.defaults=b})(jQuery);
View
98 jquery.zoom.js
@@ -6,6 +6,7 @@
var defaults = {
url: false,
icon: true,
+ grab: false,
duration: 120
};
@@ -18,7 +19,8 @@
$img = $(img),
$icon,
position = $root.css('position'),
- settings = $.extend({}, defaults, options || {});
+ settings = $.extend({}, defaults, options || {}),
+ mousemove = 'mousemove';
$root.css({
position: /(absolute|fixed)/.test(position) ? position : 'relative',
@@ -41,13 +43,37 @@
outerWidth,
outerHeight,
xRatio,
- yRatio;
+ yRatio,
+ left,
+ top;
function ratio() {
outerWidth = $root.outerWidth();
outerHeight = $root.outerHeight();
- xRatio = -(img.width - outerWidth) / outerWidth;
- yRatio = -(img.height - outerHeight) / outerHeight;
+ xRatio = (img.width - outerWidth) / outerWidth;
+ yRatio = (img.height - outerHeight) / outerHeight;
+ }
+
+ function move(e) {
+ left = (e.pageX - root.offsetLeft);
+ top = (e.pageY - root.offsetTop);
+
+ if (left > outerWidth) {
+ left = outerWidth;
+ } else if (left < 0) {
+ left = 0;
+ }
+
+ if (top > outerHeight) {
+ top = outerHeight;
+ } else if (top < 0) {
+ top = 0;
+ }
+
+ img.style.left = (left * -xRatio) + 'px';
+ img.style.top = (top * -yRatio) + 'px';
+
+ e.preventDefault();
}
ratio();
@@ -63,24 +89,56 @@
height: img.height,
border: 'none'
})
- .hover(
- function () {
- ratio();
+ .appendTo($root);
- // Skip the fade-in for IE8 and lower since it chokes on fading-in
- // and changing position based on mousemovement at the same time.
- $img.stop().fadeTo($.support.opacity ? settings.duration : 0, 1);
+ if (settings.grab) {
+ $img.mousedown(
+ function (e) {
- },
- function () {
- $img.stop().fadeTo(settings.duration, 0);
- }
- )
- .mousemove(function (e) {
- img.style.left = (e.pageX - root.offsetLeft) * xRatio + 'px';
- img.style.top = (e.pageY - root.offsetTop) * yRatio + 'px';
- })
- .appendTo($root);
+ $(document).one('mouseup',
+ function () {
+ $img
+ .stop()
+ .fadeTo(settings.duration, 0);
+
+ $(document).unbind(mousemove, move);
+ }
+ );
+
+ ratio();
+
+ move(e);
+
+ $img
+ .stop()
+ .fadeTo($.support.opacity ? settings.duration : 0, 1);
+
+ $(document)[mousemove](move);
+
+ e.preventDefault();
+ }
+ );
+ } else {
+ $img.hover(
+ function () {
+ ratio();
+
+ // Skip the fade-in for IE8 and lower since it chokes on fading-in
+ // and changing position based on mousemovement at the same time.
+ $img
+ .stop()
+ .fadeTo($.support.opacity ? settings.duration : 0, 1);
+ },
+ function () {
+ $img
+ .stop()
+ .fadeTo(settings.duration, 0);
+ }
+ )[mousemove](function (e) {
+ img.style.left = (e.pageX - root.offsetLeft) * -xRatio + 'px';
+ img.style.top = (e.pageY - root.offsetTop) * -yRatio + 'px';
+ });
+ }
};
img.src = settings.url;
View
5 readme.md
@@ -1,8 +1,11 @@
## About Zoom
-A small jQuery plugin for zooming images on mouseover. See the [project page](http://jacklmoore.com/zoom/) for documentation and a demonstration. Released under the [MIT license](http://www.opensource.org/licenses/mit-license.php).
+A small jQuery plugin for zooming images on mouseover or mousedown. See the [project page](http://jacklmoore.com/zoom/) for documentation and a demonstration. Released under the [MIT license](http://www.opensource.org/licenses/mit-license.php).
## Changelog:
+### Version 1.1 - Nov. 15 2011
+* Added 'grab' option
+
### Version 1.0 - Nov. 11 2011
* First release

0 comments on commit 57da5a1

Please sign in to comment.
Something went wrong with that request. Please try again.