Updated to v1.1

thdoan · Dec 22, 2014 · 474dfc6 · 474dfc6
1 parent 7b1bdd0
commit 474dfc6
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -16,14 +16,12 @@ Magnify JS is a simple, lightweight jQuery plugin that adds a magnifying glass s
 
 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.
 
-### Step 2: Add the HTML
+### Step 2: Specify the large image
 
-Assign the `magnify-image` class to the small image. 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. Assign the `magnify` class to the small image's parent element.
+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.
 
 ```html
-<div class="magnify">
-  <img src="/images/product.jpg" class="magnify-image" data-magnify-src="/images/product-large.jpg">
-</div>
+<img src="/images/product.jpg" data-magnify-src="/images/product-large.jpg">
 ```
 
 ### Step 3: Call the .magnify() function
@@ -33,7 +31,7 @@ Make sure this comes after the two required JavaScript files from Step 1 are loa
 ```html
 <script>
 $(document).ready(function() {
-  $('.magnify').magnify();
+  $('img').magnify();
 });
 </script>
 ```
@@ -43,8 +41,8 @@ Calling the `.magnify()` function with options:
 ```html
 <script>
 $(document).ready(function() {
-  $('.magnify').magnify({
-    speed: 200,
+  $('img').magnify({
+    speed: 100,
     src: '/images/product-large.jpg'
   });
 });
@@ -57,7 +55,7 @@ Options can be set using data attributes or passed in an `options` JavaScript ob
 
 Name    | Type   | Default | Description
 --------| ------ | ------- | -----------
-`speed` | number | 100     | The fade-in/out animation speed in ms when the lens moves on/off the image.
+`speed` | number | 200     | The fade-in/out animation speed in ms when the lens moves on/off the image.
 `src`   | string | ''      | The URI of the large image that will be shown in the magnifying lens.
 
 ## Installation

diff --git a/css/magnify.css b/css/magnify.css
@@ -1,5 +1,6 @@
 .magnify {
   position: relative;
+  display: inline-block;
 }
 .magnify .magnify-lens {
   /* Create the magnifying lens */
@@ -39,8 +40,4 @@
   font-weight: normal;
   text-align: center;
   text-shadow: 0 0 2px rgba(51, 51, 51, .8);
-}
-.magnify .magnify-image {
-  /* Fix for overlap bug at the edges during magnification */
-  display: block;
 }
diff --git a/js/jquery.magnify.js b/js/jquery.magnify.js
@@ -1,5 +1,5 @@
 /*!
- * jQuery Magnify Plugin by Tom Doan (http://thdoan.github.io/magnify/)
+ * jQuery Magnify Plugin v1.1 by Tom Doan (http://thdoan.github.io/magnify/)
  * Based on http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
  *
  * jQuery Magnify by Tom Doan is licensed under the MIT License.
@@ -9,27 +9,35 @@
 
 (function($) {
   $.fn.magnify = function(oOptions) {
+
     var oSettings = $.extend({
         /* Default options */
-        size: '175px',
-        speed: 100
+        speed: 200
       }, oOptions),
       init = function(o) {
-        var $o = $(o),
-          $img = $('.magnify-image', $o),
+        var $image = $(o),
+          $container,
           $lens,
-          sMagnifiedSrc = $img.attr('data-magnify-src') || oSettings.src,
+          sMagnifiedSrc = $image.attr('data-magnify-src') || oSettings.src || '',
           nMagnifiedWidth = 0,
-          nMagnifiedHeight = 0
+          nMagnifiedHeight = 0;
+
+        // Fix overlap bug at the edges during magnification
+        $image.css('display', 'block');
 
+        // Create container div if necessary
+        if (!$image.parent('.magnify').length) {
+          $image.wrap('<div class="magnify"></div>');
+        }
+        $container = $image.parent('.magnify');
         // Create the magnifying lens div if necessary
-        if (!$img.prev('.magnify-lens').length) {
-          $img.before('<div class="magnify-lens loading" style="background:url(' + sMagnifiedSrc + ') no-repeat 0 0;"></div>');
+        if (!$image.prev('.magnify-lens').length) {
+          $image.before('<div class="magnify-lens loading" style="background:url(' + sMagnifiedSrc + ') no-repeat 0 0;"></div>');
         }
-        $lens = $('.magnify-lens', $o);
+        $lens = $container.children('.magnify-lens');
 
-        // Calculate the native (magnified) dimensions. The zoomed version is
-        // only shown after the native dimensions are available. To get the
+        // Calculate the native (magnified) image dimensions. The zoomed version
+        // is only shown after the native dimensions are available. To get the
         // actual dimensions we have to create this image object.
         var oImage = new Image();
         $(oImage).load(function() {
@@ -44,17 +52,17 @@
         oImage.src = sMagnifiedSrc;
 
         // Handle mouse movements
-        $o.mousemove(function(e) {
+        $container.mousemove(function(e) {
           // x/y coordinates of the mouse pointer
           // This is the position of .magnify relative to the document.
-          var oMagnifyOffset = $o.offset(),
+          var oMagnifyOffset = $container.offset(),
             /* We deduct the positions of .magnify from the mouse positions
                relative to the document to get the mouse positions relative to
                the container (.magnify). */
             nX = e.pageX - oMagnifyOffset.left;
             nY = e.pageY - oMagnifyOffset.top;
           // Fade out the lens if the mouse pointer is outside the container.
-          if (nX<$o.width() && nY<$o.height() && nX>0 && nY>0) {
+          if (nX<$container.width() && nY<$container.height() && nX>0 && nY>0) {
             $lens.fadeIn(oSettings.speed);
           } else {
             $lens.fadeOut(oSettings.speed);
@@ -69,15 +77,15 @@
               // allows us to get the ratio of the pixel under the mouse pointer
               // with respect to the image and use that to position the large
               // image inside the magnifying lens.
-              var nRatioX = Math.round(nX/$img.width()*nMagnifiedWidth - $lens.width()/2)*-1,
-                nRatioY = Math.round(nY/$img.height()*nMagnifiedHeight - $lens.height()/2)*-1,
+              var nRatioX = Math.round(nX/$image.width()*nMagnifiedWidth - $lens.width()/2)*-1,
+                nRatioY = Math.round(nY/$image.height()*nMagnifiedHeight - $lens.height()/2)*-1,
                 sBgPos = nRatioX + 'px ' + nRatioY + 'px';
             }
             // Now the lens moves with the mouse. The logic is to deduct half
             // of the lens's width and height from the mouse coordinates to
             // place it with its center at the mouse coordinates. If you hover
             // on the image now, you should see the magnifying lens in action.
-            //console.log('$img.width(): ' + $img.width() + ', nMagnifiedWidth: ' + nMagnifiedWidth + ', $lens.width(): ' + $lens.width() + ', nX: ' + nX + ', sBgPos: ' + sBgPos);
+            //console.log('$image.width(): ' + $image.width() + ', nMagnifiedWidth: ' + nMagnifiedWidth + ', $lens.width(): ' + $lens.width() + ', nX: ' + nX + ', sBgPos: ' + sBgPos);
             $lens.css({
               top: nPosY,
               left: nPosX,
@@ -87,9 +95,11 @@
         });
 
       };
+
     return this.each(function() {
       /* Initiate magnification powers */
       init(this);
     });
+
   };
 }(jQuery));
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "magnify",
   "title": "jQuery Magnify",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple, lightweight jQuery magnifying glass zoom plugin.",
   "keywords": [
     "jquery-plugin",