Update to v2.3.0

Author: Tom Doan

README.md

@@ -79,24 +79,26 @@ $(document).ready(function() {
 
 The options below can be set in a JavaScript object when calling `.magnify()`.
 
-Name               | Type     | Default      | Description
------------------- | -------- | ------------ | -----------
-`src`              | string   | ''           | URI of the large image that will be shown in the magnifying lens.
-`speed`            | number   | 100          | Fade-in/out animation speed in ms when the lens moves on/off the image.
-`timeout`          | number   | -1           | Wait period in ms before hiding the magnifying lens on touch devices. Set to `-1` to disable.
-`finalWidth`       | number   |              | Width of the main image. Set this only if the image animates into view and has a different initial width. If the image doesn't animate, then you should set the image width in CSS or via the `width` attribute.
-`finalHeight`      | number   |              | Height of the main image. Set this only if the image animates into view and has a different initial height. If the image doesn't animate, then you should set the image height in CSS or via the `height` attribute.
-`magnifiedWidth`   | number   |              | Width of the image displayed inside the magnifying lens. Set this only if you want to override the large image's native width.
-`magnifiedHeight`  | number   |              | Height of the image displayed inside the magnifying lens. Set this only if you want to override the large image's native height.
-`limitBounds`      | boolean  | false        | Set this to `true` to keep the edge of the image within the magnifying lens.
-`mobileCloseEvent` | string   | 'touchstart' | Custom event to fire when you tap on the mobile close button. Set this to `'click'` or `'touchend'` if it's conflicting with another event handler. This option is only applicable when the mobile plugin (jquery.magnify-mobile.js) is used.
-`afterLoad`        | function |              | Anonymous callback function to execute after magnification is loaded.
+Name                | Type     | Default      | Description
+------------------- | -------- | ------------ | -----------
+`src`               | string   | ''           | URI of the large image that will be shown in the magnifying lens.
+`speed`             | number   | 100          | Fade-in/out animation speed in ms when the lens moves on/off the image.
+`timeout`           | number   | -1           | Wait period in ms before hiding the magnifying lens on touch devices. Set to `-1` to disable.
+`touchBottomOffset` | number   | 0            | Vertical touch point offset. Set this to something like `90` if you want to avoid your finger getting in the way of the magnifying lens on smartphones and tablets.
+`finalWidth`        | number   |              | Width of the main image. Set this only if the image animates into view and has a different initial width. If the image doesn't animate, then you should set the image width in CSS or via the `width` attribute.
+`finalHeight`       | number   |              | Height of the main image. Set this only if the image animates into view and has a different initial height. If the image doesn't animate, then you should set the image height in CSS or via the `height` attribute.
+`magnifiedWidth`    | number   |              | Width of the image displayed inside the magnifying lens. Set this only if you want to override the large image's native width.
+`magnifiedHeight`   | number   |              | Height of the image displayed inside the magnifying lens. Set this only if you want to override the large image's native height.
+`limitBounds`       | boolean  | false        | Set this to `true` to keep the edge of the image within the magnifying lens.
+`mobileCloseEvent`  | string   | 'touchstart' | Custom event to fire when you tap on the mobile close button. Set this to `'click'` or `'touchend'` if it's conflicting with another event handler. This option is only applicable when the mobile plugin (jquery.magnify-mobile.js) is used.
+`afterLoad`         | function |              | Anonymous callback function to execute after magnification is loaded.
 
 Options can also be set directly in the `<img>` tag by adding the following data attributes, which will take precedence over the corresponding options set inside an object:
 
 - `data-magnify-src` - equivalent to `src`
 - `data-magnify-speed` - equivalent to `speed`
 - `data-magnify-timeout` - equivalent to `timeout`
+- `data-magnify-touchbottomoffset` - equivalent to `touchBottomOffset`
 - `data-magnify-finalwidth` - equivalent to `finalWidth`
 - `data-magnify-finalheight` - equivalent to `finalHeight`
 - `data-magnify-magnifiedwidth` - equivalent to `magnifiedWidth`

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "magnify",
   "description": "A lightweight jQuery magnifying glass zoom plugin.",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": [
     "dist/css/magnify.css",
     "dist/js/jquery.magnify.js"

dist/js/jquery.magnify.js

@@ -13,11 +13,11 @@
       'src': '',
       'speed': 100,
       'timeout': -1,
+      'touchBottomOffset': 0,
       'finalWidth': null,
       'finalHeight': null,
       'magnifiedWidth': null,
       'magnifiedHeight': null,
-      'touchBottom': true,
       'limitBounds': false,
       'mobileCloseEvent': 'touchstart',
       'afterLoad': function(){}
@@ -83,6 +83,13 @@
         if (oDataAttr['limitBounds']==='true') oOptions['limitBounds'] = true;
         if (typeof window[oDataAttr['afterLoad']]==='function') oOptions.afterLoad = window[oDataAttr['afterLoad']];
 
+        // Implement touch point bottom offset only on mobile devices
+        if (/\b(Android|BlackBerry|IEMobile|iPad|iPhone|Mobile|Opera Mini)\b/.test(navigator.userAgent)) {
+          if (!isNaN(+oDataAttr['touchBottomOffset'])) oOptions['touchBottomOffset'] = +oDataAttr['touchBottomOffset'];
+        } else {
+          oOptions['touchBottomOffset'] = 0;
+        }
+
         // Save any inline styles for resetting
         $image.data('originalStyle', $image.attr('style'));
 
@@ -160,35 +167,8 @@
                 //
                 // We deduct the positions of .magnify from the mouse or touch positions relative to
                 // the document to get the mouse or touch positions relative to the container.
-
-                // Mobile only offset touch point to be at the bottom not on the center
-                var isMobile = {
-                    Android: function() {
-                        return navigator.userAgent.match(/Android/i);
-                    },
-                    BlackBerry: function() {
-                        return navigator.userAgent.match(/BlackBerry/i);
-                    },
-                    iOS: function() {
-                        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
-                    },
-                    Opera: function() {
-                        return navigator.userAgent.match(/Opera Mini/i);
-                    },
-                    Windows: function() {
-                        return navigator.userAgent.match(/IEMobile/i);
-                    },
-                    any: function() {
-                        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
-                    }
-                };
-                if(isMobile.any() && oOptions.touchBottom === true) {
-                    nX = (e.pageX || e.originalEvent.touches[0].pageX) - oContainerOffset['left'],
-                    nY = ((e.pageY || e.originalEvent.touches[0].pageY) - oContainerOffset['top']) -90;
-                } else {
-                  nX = (e.pageX || e.originalEvent.touches[0].pageX) - oContainerOffset['left'],
-                  nY = (e.pageY || e.originalEvent.touches[0].pageY) - oContainerOffset['top'];
-                }
+                nX = (e.pageX || e.originalEvent.touches[0].pageX) - oContainerOffset['left'],
+                nY = ((e.pageY || e.originalEvent.touches[0].pageY) - oContainerOffset['top']) - oOptions['touchBottomOffset'];
                 // Toggle magnifying lens
                 if (!$lens.is(':animated')) {
                   if (nX>nBoundX && nX<nImageWidth-nBoundX && nY>nBoundY && nY<nImageHeight-nBoundY) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "magnify",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A lightweight jQuery magnifying glass zoom plugin.",
   "keywords": [
     "jquery-plugin",