Added 'grab' option.

eat-full · Nov 15, 2011 · 57da5a1 · 57da5a1
1 parent d738fbc
commit 57da5a1
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 26 deletions.
diff --git a/demo.html b/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>

diff --git a/grab.cur b/grab.cur
diff --git a/grabbed.cur b/grabbed.cur
diff --git a/jquery.zoom-min.js b/jquery.zoom-min.js
diff --git a/jquery.zoom.js b/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;

diff --git a/readme.md b/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