STENCIL-3106 Switch from jquery-zoom to easyzoom, allowing for lazy m…

…agnified image loading

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

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import 'jquery-zoom';
+import 'easyzoom';
 import _ from 'lodash';
 
 export default class ImageGallery {
@@ -17,10 +17,8 @@ export default class ImageGallery {
     setMainImage(imgObj) {
         this.currentImage = _.clone(imgObj);
 
-        this.destroyImageZoom();
         this.setActiveThumb();
         this.swapMainImage();
-        this.setImageZoom();
     }
 
     setAlternateImage(imgObj) {
@@ -62,19 +60,15 @@ export default class ImageGallery {
     }
 
     swapMainImage() {
+        this.easyzoom.data('easyZoom').swap(this.currentImage.mainImageUrl, this.currentImage.zoomImageUrl);
+
         this.$mainImage.attr({
             'data-zoom-image': this.currentImage.zoomImageUrl,
-        }).find('img').attr({
-            src: this.currentImage.mainImageUrl,
         });
     }
 
     setImageZoom() {
-        this.$mainImage.zoom({ url: this.$mainImage.attr('data-zoom-image'), touch: false });
-    }
-
-    destroyImageZoom() {
-        this.$mainImage.trigger('zoom.destroy');
+        this.easyzoom = this.$mainImage.easyZoom({ errorNotice: '', loadingNotice: '' });
     }
 
     bindEvents() {

assets/scss/components/stencil/productView/_productView.scss

@@ -23,6 +23,7 @@
     display: flex;
     justify-content: center;
     margin: 0;
+    position: relative;
 
     @include breakpoint("medium") {
         min-height: 366px;
@@ -389,3 +390,19 @@
 .shareProduct {
     text-align: center;
 }
+
+
+// EasyZoom settings for zoomable product image
+// -----------------------------------------------------------------------------
+
+.productView-image .easyzoom-flyout {
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    img {
+        max-width: none;
+        width: auto;
+    }
+}

package.json

@@ -9,11 +9,11 @@
     "@bigcommerce/stencil-utils": "^1.0.7",
     "async": "^2.5.0",
     "babel-polyfill": "^6.26.0",
+    "easyzoom": "^2.5.0",
     "fastclick": "^1.0.6",
     "foundation-sites": "^5.5.3",
     "html5-history-api": "^4.2.7",
     "jquery": "^2.2.4",
-    "jquery-zoom": "^1.7.15",
     "jstree": "vakata/jstree",
     "lazysizes": "3.0.0",
     "lodash": "^4.17.4",