diff --git a/README.md b/README.md index 3cc7003..f4f7920 100644 --- a/README.md +++ b/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 `` 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` diff --git a/bower.json b/bower.json index a032efc..6c46708 100644 --- a/bower.json +++ b/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" diff --git a/dist/js/jquery.magnify.js b/dist/js/jquery.magnify.js index 4a23660..7aae147 100644 --- a/dist/js/jquery.magnify.js +++ b/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 && nXnBoundY && nY