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'),
@@ -63,12 +64,27 @@ export default class ImageGallery {
         this.easyzoom.data('easyZoom').swap(this.currentImage.mainImageUrl, this.currentImage.zoomImageUrl);
 
         this.$mainImage.attr({
-            'data-zoom-image': this.currentImage.zoomImageUrl,
-        });
+              'data-zoom-image': this.currentImage.zoomImageUrl,
+          });
     }
 
+
+    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() {