Merge pull request #49 from ValeryYafremau/JS-320

JS-320: Image doesn't fit into container after rotation
magento · Nov 24, 2015 · ec77114 · ec77114
2 parents e464990 + 3b9e86d
commit ec77114
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js
@@ -59,6 +59,13 @@ define([
         }
 
         function toggleZoomable($image, flag) {
+            var minHeight, 
+                minWidth,
+                height = $image.height(),
+                width = $image.width(),
+                parentHeight = $image.parent().height(),
+                parentWidth = $image.parent().width();
+
             if (flag) {
                 $image.css({
                     'min-width': $image.width(),
@@ -75,6 +82,22 @@ define([
                     right: '',
                     bottom: ''
                 }).removeClass(imageZoommable);
+
+                //For iPad/iPhone rotation changing
+                if (width > parentWidth || height > parentHeight) {
+
+                    if (width / height < parentWidth / parentHeight) {
+                        minHeight = parentHeight;
+                        minWidth = width * (parentHeight / height);
+                    } else {
+                        minWidth = parentWidth;
+                        minHeight = height * parentWidth / width;
+                    }
+                    $image.css({
+                        'min-width': minWidth,
+                        'min-height': minHeight
+                    });
+                }
             }
         }
 
@@ -685,6 +708,7 @@ define([
             }
 
             $(window).resize(function () {
+                toggleZoomButtons($image);
                 if ($image.hasClass(imageZoommable) && !allowZoomOut) {
                     resetVars($image);
                 }