Permalink
Browse files

Added 'grab' option.

  • Loading branch information...
Jack Moore
Jack Moore committed Nov 15, 2011
1 parent d738fbc commit 57da5a113a9afe44cae0619df1efb46cf276d672
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
@@ -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
Binary file not shown.
View

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

Oops, something went wrong.
View
@@ -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
@@ -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.