Fix scrollbar showing when lens is off screen

thdoan · Feb 29, 2016 · 20274c4 · 20274c4
1 parent d53631d
commit 20274c4
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -26,14 +26,14 @@ 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" data-magnify-src="/images/product-large.jpg">
+<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">
+  <img src="/images/product.jpg" class="zoom">
 </a>
 ```
 
@@ -44,7 +44,7 @@ Make sure this comes after the two required JavaScript files from Step 1 are loa
 ```html
 <script>
 $(document).ready(function() {
-  $('img').magnify();
+  $('.zoom').magnify();
 });
 </script>
 ```
@@ -54,7 +54,7 @@ Calling the `.magnify()` function with options:
 ```html
 <script>
 $(document).ready(function() {
-  $('img').magnify({
+  $('.zoom').magnify({
     speed: 200,
     src: '/images/product-large.jpg'
   });

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "magnify",
   "description": "A simple, lightweight jQuery magnifying glass zoom plugin.",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "main": [
     "dist/css/magnify.css",
     "dist/js/jquery.magnify.js"

diff --git a/dist/css/magnify.css b/dist/css/magnify.css
@@ -1,3 +1,6 @@
+html.magnifying > body {
+  overflow-x: hidden !important;
+}
 .magnify {
   position: relative;
   display: inline-block;
@@ -24,7 +27,7 @@
 }
 .magnify .magnify-lens.loading {
   background: #333 !important;
-  opacity: .75;
+  opacity: 0.75;
 }
 .magnify .magnify-lens.loading:after {
   /* Loading text */
@@ -36,6 +39,6 @@
   content: 'Loading...';
   font: italic normal 16px/1 Calibri, sans-serif;
   text-align: center;
-  text-shadow: 0 0 2px rgba(51, 51, 51, .8);
+  text-shadow: 0 0 2px rgba(51, 51, 51, 0.8);
   text-transform: none;
 }
diff --git a/dist/js/jquery.magnify.js b/dist/js/jquery.magnify.js
@@ -1,5 +1,5 @@
 /*!
- * jQuery Magnify Plugin v1.6.0 by Tom Doan (http://thdoan.github.io/magnify/)
+ * jQuery Magnify Plugin v1.6.5 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.
@@ -24,7 +24,12 @@
           $lens,
           nMagnifiedWidth = 0,
           nMagnifiedHeight = 0,
-          sImgSrc = $image.attr('data-magnify-src') || oSettings.src || $anchor.attr('href') || '';
+          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
+            });
+          };
         // Disable zooming if no valid zoom image source
         if (!sImgSrc) return;
 
@@ -85,9 +90,12 @@
               // Toggle magnifying lens
               if (!$lens.is(':animated')) {
                 if (nX<$container.width() && nY<$container.height() && nX>0 && nY>0) {
-                  if ($lens.is(':hidden')) $lens.fadeIn(oSettings.speed);
+                  if ($lens.is(':hidden')) {
+                    $('html').addClass('magnifying'); // Hide overflow while zooming
+                    $lens.fadeIn(oSettings.speed);
+                  }
                 } else {
-                  if ($lens.is(':visible')) $lens.fadeOut(oSettings.speed);
+                  hideLens();
                 }
               }
               if ($lens.is(':visible')) {
@@ -118,20 +126,14 @@
             });
 
             // Prevent magnifying lens from getting "stuck"
-            $container.mouseleave(function() {
-              if ($lens.is(':visible')) $lens.fadeOut(oSettings.speed);
-            });
+            $container.mouseleave(hideLens);
             if (oSettings.timeout>=0) {
               $container.on('touchend', function() {
-                setTimeout(function() {
-                  if ($lens.is(':visible')) $lens.fadeOut(oSettings.speed);
-                }, oSettings.timeout);
+                setTimeout(hideLens, oSettings.timeout);
               });
             }
             // Ensure lens is closed when tapping outside of it
-            $('body').not($container).on('touchstart', function() {
-              if ($lens.is(':visible')) $lens.fadeOut(oSettings.speed);
-            });
+            $('body').not($container).on('touchstart', hideLens);
 
             if ($anchor.length) {
               // Make parent anchor inline-block to have correct dimensions

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "magnify",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "A simple, lightweight jQuery magnifying glass zoom plugin.",
   "keywords": [
     "jquery-plugin",