Fix leftover resize handler after destroy(); add magnifystart and mag…

…nifyend events

README.md

@@ -11,7 +11,7 @@ If you don't use jQuery, then you can use [TrySound's vanilla JS version](https:
 
 ### Step 1: Link the required files
 
-```html
+```
 <link rel="stylesheet" href="/css/magnify.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script src="/js/jquery.magnify.js"></script>
@@ -25,13 +25,13 @@ You have complete control over the style and size of the lens by modifying `magn
 
 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
+```
 <img src="/images/product.jpg" class="zoom" data-magnify-src="/images/product-large.jpg">
 ```
 
 If the `data-magnify-src` attribute or `src` option is not used, then Magnify will try to grab the large image from the parent `<a>` tag, e.g.:
 
-```html
+```
 <a href="/images/product-large.jpg">
   <img src="/images/product.jpg" class="zoom">
 </a>
@@ -41,7 +41,7 @@ If the `data-magnify-src` attribute or `src` option is not used, then Magnify wi
 
 Make sure this comes after the two required JavaScript files from Step 1 are loaded.
 
-```html
+```
 <script>
 $(document).ready(function() {
   $('.zoom').magnify();
@@ -51,7 +51,7 @@ $(document).ready(function() {
 
 Calling the `.magnify()` function with options:
 
-```html
+```
 <script>
 $(document).ready(function() {
   $('.zoom').magnify({
@@ -77,7 +77,7 @@ Name      | Type     | Default | Description
 
 To use a public method, you need to assign the element that you called `.magnify()` on to a variable. Sample usage:
 
-```html
+```
 <script>
 $(document).ready(function() {
   // Enable zoom
@@ -92,6 +92,23 @@ Name        | Description
 ----------- | -----------
 `destroy()` | Disable zoom and reset to the original state.
 
+## Events
+
+Magnify triggers two custom events on the `html` element: `magnifystart` when you enter zoom mode and `magnifyend` when you exit zoom mode. Sample usage:
+
+```
+$('html').on({
+  magnifystart: function() {
+    console.log('magnifystart event fired');
+  },
+  magnifyend: function() {
+    console.log('magnifyend event fired');
+  }
+});
+```
+
+When in zoom mode, the `magnifying` class is also added to the `html` element, so you can change the style when zooming.
+
 ## Installation
 
 Choose from one of the following methods:

bower.json

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

dist/js/jquery.magnify.js

@@ -1,5 +1,5 @@
 /*!
- * jQuery Magnify Plugin v1.6.8 by Tom Doan (http://thdoan.github.io/magnify/)
+ * jQuery Magnify Plugin v1.6.9 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.
@@ -17,27 +17,6 @@
         timeout: -1,
         onload: function(){}
       }, oOptions),
-      // Based on debouncing function by John Hann (simplified)
-      // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
-      debounce = function(func) {
-        var timeout; // Handle to setTimeout async task (detection period)
-        // Return the new debounced function which executes the original
-        // function only once until the detection period expires
-        return function debounced() {
-          var obj = this,     // Reference to original context object
-            args = arguments; // Arguments at execution time
-          // Execute after some delay
-          function delayed() {
-            func.apply(obj, args);
-            // Clear timeout handle
-            timeout = null;
-          }
-          // Stop any current detection period
-          if (timeout) clearTimeout(timeout);
-          // Reset the detection period
-          timeout = setTimeout(delayed, 100);
-        };
-      },
       init = function(el) {
         // Initiate
         var $image = $(el),
@@ -56,7 +35,7 @@
           sImgSrc = $image.attr('data-magnify-src') || oSettings.src || $anchor.attr('href') || '',
           hideLens = function() {
             if ($lens.is(':visible')) $lens.fadeOut(oSettings.speed, function() {
-              $('html').removeClass('magnifying'); // Reset overflow
+              $('html').removeClass('magnifying').trigger('magnifyend'); // Reset overflow-x
             });
           };
         // Disable zooming if no valid zoom image source
@@ -131,7 +110,7 @@
               if (!$lens.is(':animated')) {
                 if (nX<nContainerWidth && nY<nContainerHeight && nX>0 && nY>0) {
                   if ($lens.is(':hidden')) {
-                    $('html').addClass('magnifying'); // Hide overflow while zooming
+                    $('html').addClass('magnifying').trigger('magnifystart'); // Hide overflow-x while zooming
                     $lens.fadeIn(oSettings.speed);
                   }
                 } else {
@@ -194,6 +173,15 @@
         });
 
         elImage.src = sImgSrc;
+      },
+      // Simple debounce
+      nTimer = 0,
+      refresh = function() {
+        clearTimeout(nTimer);
+        nTimer = setTimeout(function() {
+          $that.destroy();
+          $that.magnify(oSettings);
+        }, 100);
       };
 
     // Turn off zoom and reset to original state
@@ -205,15 +193,12 @@
         else $this.removeAttr('style');
         $this.unwrap('.magnify').prevAll('.magnify-lens').remove();
       });
+      // Unregister event handler
+      $(window).off('resize', refresh);
     }
 
     // Handle window resizing
-    $(window).resize(debounce(function() {
-      $that.destroy();
-      $that.each(function() {
-        init(this);
-      })
-    }));
+    $(window).resize(refresh);
 
     return this.each(function() {
       // Initiate magnification powers

package.json

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