fix(catalog): MERC-3743 Fix zoom behavior for small images in gallery

bigcommerce · Aug 8, 2018 · d48c1da · d48c1da
1 parent 5dfd090
commit d48c1da
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/assets/js/theme/product/image-gallery.js b/assets/js/theme/product/image-gallery.js
@@ -41,7 +41,6 @@ export default class ImageGallery {
 
     selectNewImage(e) {
         e.preventDefault();
-
         const $target = $(e.currentTarget);
         const imgObj = {
             mainImageUrl: $target.attr('data-image-gallery-new-image-url'),
@@ -67,8 +66,22 @@ export default class ImageGallery {
         });
     }
 
+    checkImage() {
+        const containerHeight = $('.productView-image').height();
+        const containerWidth = $('.productView-image').width();
+        const height = this.easyzoom.data('easyZoom').$zoom.context.height;
+        const width = this.easyzoom.data('easyZoom').$zoom.context.width;
+        if (height < containerHeight || width < containerWidth) {
+            this.easyzoom.data('easyZoom').hide();
+        }
+    }
+
     setImageZoom() {
-        this.easyzoom = this.$mainImage.easyZoom({ errorNotice: '', loadingNotice: '' });
+        this.easyzoom = this.$mainImage.easyZoom({
+            onShow: () => this.checkImage(),
+            errorNotice: '',
+            loadingNotice: '',
+        });
     }
 
     bindEvents() {