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

assets/js/theme/product/image-gallery.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import 'easyzoom';
 import _ from 'lodash';
 
+
 export default class ImageGallery {
     constructor($gallery) {
         this.$mainImage = $gallery.find('[data-image-gallery-main]');
@@ -39,9 +40,9 @@ 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 +68,24 @@ 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() {