├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── bower.json
├── dist
    ├── css
    │   └── magnify.css
    └── js
    │   └── jquery.magnify.js
└── package.json


/.npmignore:
--------------------------------------------------------------------------------
1 | **/.*
2 | *.json
3 | LICENSE
4 | README.md


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | script: /bin/true
 3 | install: /bin/true
 4 | deploy:
 5 |   provider: npm
 6 |   email: thdoan@gmail.com
 7 |   api_key:
 8 |     secure: Fg/W6bkAeU7kInVYGQFWDT5/QQjk/A22YUXYGif9dUma5zx7Ulq+V+Pz68B3y/BmVnghf7XBEetDlFP5qMGMgIdZbcg8BwjRrfntK7LUBq0P1nPcuO79ZfNbIFSXjchZ1wNfu03RnrZbSSKYVj7DWEEHE0r/lK5BtAVFiJ66WPA=
 9 |   on:
10 |     tags: true
11 |     repo: thdoan/magnify
12 |     all_branches: true
13 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Tom Doan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Magnify JS
 2 | 
 3 | Magnify JS is a simple, lightweight jQuery plugin that adds a magnifying glass style zoom functionality to images. It is a useful feature to have for product images on ecommerce websites, or if you just want people to be able to zoom into an image without spawning additional overlays or popup windows that may cover your content. Magnify JS is based on [this tutorial](http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3).
 4 | 
 5 | ### [See a demo »](http://thdoan.github.io/magnify/demo.html)
 6 | 
 7 | ## Getting Started
 8 | 
 9 | ### Step 1: Link the required files
10 | 
11 | ```html
12 | <link rel="stylesheet" href="/css/magnify.css">
13 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
14 | <script src="/js/jquery.magnify.js"></script>
15 | ```
16 | 
17 | You have complete control over the style and size of the lens by modifying `magnify.css`. It is recommended to load the two JavaScript files at the bottom just before the closing `</body>` tag if possible.
18 | 
19 | ### Step 2: Specify the large image
20 | 
21 | The URI to the large image can be placed in the `data-magnify-src` attribute (as shown below) or passed as the `src` option when calling the `.magnify()` function.
22 | 
23 | ```html
24 | <img src="/images/product.jpg" data-magnify-src="/images/product-large.jpg">
25 | ```
26 | 
27 | If the `data-magnify-src` attribute or `src` option is not used, then Magnify JS will try to grab the large image from the parent `<a>` tag, e.g.:
28 | 
29 | ```html
30 | <a href="/images/product-large.jpg">
31 |   <img src="/images/product.jpg">
32 | </a>
33 | ```
34 | 
35 | ### Step 3: Call the .magnify() function
36 | 
37 | Make sure this comes after the two required JavaScript files from Step 1 are loaded.
38 | 
39 | ```html
40 | <script>
41 | $(document).ready(function() {
42 |   $('img').magnify();
43 | });
44 | </script>
45 | ```
46 | 
47 | Calling the `.magnify()` function with options:
48 | 
49 | ```html
50 | <script>
51 | $(document).ready(function() {
52 |   $('img').magnify({
53 |     speed: 200,
54 |     src: '/images/product-large.jpg'
55 |   });
56 | });
57 | </script>
58 | ```
59 | 
60 | ## Options
61 | 
62 | Options can be set using data attributes or passed in an `options` JavaScript object when calling `.magnify()`. For data attributes, append the option name to "data-magnify-" (e.g., `data-magnify-src="..."`).
63 | 
64 | Name    | Type    | Default | Description
65 | --------| ------- | ------- | -----------
66 | `debug` | boolean | false   | Toggle activity logging in the console.
67 | `speed` | number  | 100     | The fade-in/out animation speed in ms when the lens moves on/off the image.
68 | `src`   | string  | ''      | The URI of the large image that will be shown in the magnifying lens.
69 | 
70 | ## Installation
71 | 
72 | Choose from one of the following methods:
73 | 
74 | - `git clone https://github.com/thdoan/magnify.git`
75 | - `bower install magnify`
76 | - `npm install magnify`
77 | - [Download ZIP](https://github.com/thdoan/magnify/archive/master.zip)


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "magnify",
 3 |   "description": "A simple, lightweight jQuery magnifying glass zoom plugin.",
 4 |   "version": "1.3.0",
 5 |   "main": [
 6 |     "dist/css/magnify.css",
 7 |     "dist/js/jquery.magnify.js"
 8 |   ],
 9 |   "license": "MIT",
10 |   "ignore": [
11 |     "**/.*",
12 |     "*.json",
13 |     "LICENSE",
14 |     "README.md"
15 |   ],
16 |   "keywords": [
17 |     "jquery plugin",
18 |     "jquery magnify",
19 |     "magnify",
20 |     "zoom"
21 |   ],
22 |   "authors": [
23 |     "Tom Doan <thdoan@gmail.com> (http://www.tohodo.com/)"
24 |   ],
25 |   "homepage": "http://thdoan.github.io/magnify/",
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "git://github.com/thdoan/magnify.git"
29 |   },
30 |   "dependencies": {
31 |     "jquery": ">=1.7.0"
32 |   }
33 | }


--------------------------------------------------------------------------------
/dist/css/magnify.css:
--------------------------------------------------------------------------------
 1 | .magnify {
 2 |   position: relative;
 3 |   display: inline-block;
 4 | }
 5 | .magnify .magnify-lens {
 6 |   /* Create the magnifying lens */
 7 |   position: absolute;
 8 |   width: 200px;
 9 |   height: 200px;
10 |   border-radius: 100%;
11 |   /* Multiple box shadows to achieve the glass lens effect */
12 |   -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
13 |     0 0 7px 7px rgba(0, 0, 0, 0.25),
14 |     inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
15 |   box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
16 |     0 0 7px 7px rgba(0, 0, 0, 0.25),
17 |     inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
18 |   /* Hide the mouse pointer */
19 |   cursor: none;
20 |   /* Hide the lens by default */
21 |   display: none;
22 |   /* Place the lens on top of other elements */
23 |   z-index: 100;
24 | }
25 | .magnify .magnify-lens.loading {
26 |   background: #333 !important;
27 |   opacity: .75;
28 | }
29 | .magnify .magnify-lens.loading:after {
30 |   /* Loading text */
31 |   position: absolute;
32 |   top: 45%;
33 |   left: 0;
34 |   width: 100%;
35 |   color: #fff;
36 |   content: 'Loading...';
37 |   font: italic normal 16px/1 Calibri, sans-serif;
38 |   text-align: center;
39 |   text-shadow: 0 0 2px rgba(51, 51, 51, .8);
40 |   text-transform: none;
41 | }


--------------------------------------------------------------------------------
/dist/js/jquery.magnify.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * jQuery Magnify Plugin v1.3.0 by Tom Doan (http://thdoan.github.io/magnify/)
  3 |  * Based on http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
  4 |  *
  5 |  * jQuery Magnify by Tom Doan is licensed under the MIT License.
  6 |  * Read a copy of the license in the LICENSE file or at
  7 |  * http://choosealicense.com/licenses/mit
  8 |  */
  9 | 
 10 | (function($) {
 11 |   $.fn.magnify = function(oOptions) {
 12 | 
 13 |     var oSettings = $.extend({
 14 |         /* Default options */
 15 |         debug: false,
 16 |         speed: 100
 17 |       }, oOptions),
 18 |       $anchor,
 19 |       $container,
 20 |       $image,
 21 |       $lens,
 22 |       nMagnifiedWidth = 0,
 23 |       nMagnifiedHeight = 0,
 24 |       init = function(el) {
 25 |         // Initiate
 26 |         $image = $(el);
 27 |         $anchor = $image.parents('a');
 28 |         // Activate magnification!
 29 |         // Try to get zoom image dimensions
 30 |         // Proceed only if able to get zoom image dimensions OK
 31 |         zoom($image.attr('data-magnify-src') || oSettings.src || $anchor.attr('href') || '');
 32 |       },
 33 |       zoom = function(sImgSrc, bAnchor) {
 34 |         // Disable zooming if no valid zoom image source
 35 |         if (!sImgSrc) return;
 36 |         // Calculate the native (magnified) image dimensions. The zoomed version
 37 |         // is only shown after the native dimensions are available. To get the
 38 |         // actual dimensions we have to create this image object.
 39 |         var elImage = new Image();
 40 |         $(elImage).on({
 41 |           load: function() {
 42 |             // Got image dimensions OK
 43 | 
 44 |             // Fix overlap bug at the edges during magnification
 45 |             $image.css('display', 'block');
 46 | 
 47 |             // Create container div if necessary
 48 |             if (!$image.parent('.magnify').length) {
 49 |               $image.wrap('<div class="magnify"></div>');
 50 |             }
 51 |             $container = $image.parent('.magnify');
 52 |             // Create the magnifying lens div if necessary
 53 |             if ($image.prev('.magnify-lens').length) {
 54 |               $container.children('.magnify-lens').css('background-image', 'url(' + sImgSrc + ')');
 55 |             } else {
 56 |               $image.before('<div class="magnify-lens loading" style="background:url(' + sImgSrc + ') no-repeat 0 0"></div>');
 57 |             }
 58 |             $lens = $container.children('.magnify-lens');
 59 | 
 60 |             // Remove the "Loading..." text.
 61 |             $lens.removeClass('loading');
 62 |             // This code is inside the .load() function, which is important.
 63 |             // The width and height of the object would return 0 if accessed
 64 |             // before the image is fully loaded.
 65 |             nMagnifiedWidth = elImage.width;
 66 |             nMagnifiedHeight = elImage.height;
 67 |             if (oSettings.debug) console.log('[MAGNIFY] Got zoom image dimensions OK (width x height): ' + nMagnifiedWidth + ' x ' + nMagnifiedHeight);
 68 |             // Clean up
 69 |             elImage = null;
 70 | 
 71 |             // Handle mouse movements
 72 |             $container.mousemove(function(e) {
 73 |               // x/y coordinates of the mouse pointer
 74 |               // This is the position of .magnify relative to the document.
 75 |               var oMagnifyOffset = $container.offset(),
 76 |                 /* We deduct the positions of .magnify from the mouse positions
 77 |                    relative to the document to get the mouse positions relative to
 78 |                    the container (.magnify). */
 79 |                 nX = e.pageX - oMagnifyOffset.left;
 80 |                 nY = e.pageY - oMagnifyOffset.top;
 81 |               // Fade out the lens if the mouse pointer is outside the container.
 82 |               if (nX<$container.width() && nY<$container.height() && nX>0 && nY>0) {
 83 |                 $lens.fadeIn(oSettings.speed);
 84 |               } else {
 85 |                 $lens.fadeOut(oSettings.speed);
 86 |               }
 87 |               if ($lens.is(':visible')) {
 88 |                 /* Move the magnifying lens with the mouse */
 89 |                 var nPosX = nX - $lens.width()/2,
 90 |                   nPosY = nY - $lens.height()/2;
 91 |                 if (nMagnifiedWidth && nMagnifiedHeight) {
 92 |                   // Change the background position of .magnify-lens according to
 93 |                   // the position of the mouse over the .magnify-image image. This
 94 |                   // allows us to get the ratio of the pixel under the mouse pointer
 95 |                   // with respect to the image and use that to position the large
 96 |                   // image inside the magnifying lens.
 97 |                   var nRatioX = Math.round(nX/$image.width()*nMagnifiedWidth - $lens.width()/2)*-1,
 98 |                     nRatioY = Math.round(nY/$image.height()*nMagnifiedHeight - $lens.height()/2)*-1,
 99 |                     sBgPos = nRatioX + 'px ' + nRatioY + 'px';
100 |                 }
101 |                 // Now the lens moves with the mouse. The logic is to deduct half
102 |                 // of the lens's width and height from the mouse coordinates to
103 |                 // place it with its center at the mouse coordinates. If you hover
104 |                 // on the image now, you should see the magnifying lens in action.
105 |                 //
106 |                 // DEBUG:
107 |                 //console.log('$image.width(): ' + $image.width() + ', nMagnifiedWidth: ' + nMagnifiedWidth + ', $lens.width(): ' + $lens.width() + ', nX: ' + nX + ', sBgPos: ' + sBgPos);
108 |                 $lens.css({
109 |                   top: Math.round(nPosY) + 'px',
110 |                   left: Math.round(nPosX) + 'px',
111 |                   backgroundPosition: sBgPos || ''
112 |                 });
113 |               }
114 |             });
115 | 
116 |             if ($anchor.length) {
117 |               // Make parent anchor inline-block to have correct dimensions
118 |               $anchor.css('display', 'inline-block');
119 |               // Disable parent anchor if it's sourcing the large image
120 |               if (bAnchor || ($anchor.attr('href') && !($image.attr('data-magnify-src') || oSettings.src))) {
121 |                 $anchor.click(function(e) {
122 |                   e.preventDefault();
123 |                 });
124 |               }
125 |             }
126 | 
127 |           },
128 |           error: function() {
129 |             // Clean up
130 |             elImage = null;
131 |             if (bAnchor) {
132 |               if (oSettings.debug) console.log('[MAGNIFY] Parent anchor zoom source is invalid also. Disabling zoom...');
133 |             } else {
134 |               if (oSettings.debug) console.log('[MAGNIFY] Invalid data-magnify-src. Looking in parent anchor instead -> ' + $anchor.attr('href'));
135 |               zoom($anchor.attr('href'), true);
136 |             }
137 |           }
138 |         });
139 | 
140 |         elImage.src = sImgSrc;
141 |       };
142 | 
143 |     return this.each(function() {
144 |       /* Initiate magnification powers */
145 |       init(this);
146 |     });
147 | 
148 |   };
149 | }(jQuery));


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "magnify",
 3 |   "version": "1.3.0",
 4 |   "description": "A simple, lightweight jQuery magnifying glass zoom plugin.",
 5 |   "keywords": [
 6 |     "jquery-plugin",
 7 |     "jquery magnify",
 8 |     "magnify",
 9 |     "zoom"
10 |   ],
11 |   "homepage": "http://thdoan.github.io/magnify/",
12 |   "bugs": {
13 |     "url": "https://github.com/thdoan/magnify/issues"
14 |   },
15 |   "license": "MIT",
16 |   "author": "Tom Doan <thdoan@gmail.com> (http://www.tohodo.com/)",
17 |   "main": "dist/js/jquery.magnify.js",
18 |   "dependencies": {
19 |     "jquery": ">=1.7.0"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "https://github.com/thdoan/magnify.git"
24 |   }
25 | }


--------------------------------------------------------------------------------