Width and Height Decreased

packages/Webkul/Velocity/publishable/assets/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/velocity.js": "/js/velocity.js?id=fd91d92b77bfe50ba686",
+    "/js/velocity.js": "/js/velocity.js?id=b291da84dd7ff5c4674b",
     "/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
-    "/css/velocity.css": "/css/velocity.css?id=2df490c7a6700e2c0c3b"
+    "/css/velocity.css": "/css/velocity.css?id=e41e400c39a3cb5bc551"
 }

packages/Webkul/Velocity/src/Resources/assets/js/UI/components/image-magnifier.vue

@@ -3,14 +3,23 @@
         <img
             :src="src"
             :data-zoom-image="src"
-            ref="activeProductImage"
             id="active-product-image"
             class="main-product-image"
-            alt=""
+            ref="activeProductImage"
         />
     </div>
 </template>
 
+<style lang="scss">
+    .magnifier {
+        > img {
+            max-width: 100%;
+            min-height: 450px;
+            max-height: 530px;
+        }
+    }
+</style>
+
 <script type="text/javascript">
     export default {
         props: ['src'],
@@ -33,9 +42,10 @@
             this.elevateZoom();
 
             this.$root.$on('changeMagnifiedImage', ({smallImageUrl, largeImageUrl}) => {
+                console.log({smallImageUrl, largeImageUrl});
                 /* removed old instance */
                 $('.zoomContainer').remove();
-                this.activeImage.removeData('elevateZoom');
+                this.activeImage.remove('elevateZoom');
 
                 /* update source for images */
                 this.activeImageElement.src = smallImageUrl;
@@ -51,8 +61,8 @@
                 this.activeImage.ezPlus({
                     cursor: 'pointer',
                     scrollZoom: true,
-                    zoomWindowWidth: 400,
-                    zoomWindowHeight: 400,
+                    zoomWindowWidth: 250,
+                    zoomWindowHeight: 250,
                 });
             },
         }

packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss

@@ -4,19 +4,6 @@
     padding-left: 0 !important;
     padding-right: 0 !important;
 
-    .magnifier {
-        > img {
-            max-width: 100%;
-            min-height: 450px;
-            max-height: 530px;
-        }
-    }
-
-    img {
-        // width: 100%;
-        // height: 100%;
-    }
-
     .right {
         @extend .fs16;
 

packages/Webkul/Velocity/src/Resources/views/shop/products/view/gallery.blade.php

@@ -47,7 +47,7 @@
                 add-class="product-gallery"
                 :slides-count="thumbs.length">
 
-                <slide :slot="`slide-${index}`" v-for="(thumb, index) in thumbs">
+                <slide :slot="`slide-${index}`" v-for="(thumb, index) in thumbs" :key="index">
                     <li
                         @mouseover="changeImage({
                             largeImageUrl: thumb.large_image_url,
@@ -133,7 +133,8 @@
                         this.currentOriginalImageUrl = originalImageUrl;
 
                         this.$root.$emit('changeMagnifiedImage', {
-                            smallImageUrl: this.currentOriginalImageUrl
+                            smallImageUrl: this.currentOriginalImageUrl,
+                            largeImageUrl: this.currentLargeImageUrl
                         });
 
                         let productImage = $('.vc-small-product-image');