Skip to content

Commit

Permalink
Update to v2.3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Tom Doan committed Apr 16, 2018
1 parent 436c661 commit 85e6324
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 44 deletions.
26 changes: 14 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
40 changes: 10 additions & 30 deletions dist/js/jquery.magnify.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(){}
Expand Down Expand Up @@ -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'));

Expand Down Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down

0 comments on commit 85e6324

Please sign in to comment.