From d4d93739dcd1d64ed083911bc92185066d4f1d25 Mon Sep 17 00:00:00 2001
From: rahul shukla <rahulshukla.symfony517@webkul.com>
Date: Mon, 25 Mar 2019 16:32:13 +0530
Subject: [PATCH] product zoom functionality added

---
 config/imagecache.php                         | 34 +++++++++----------
 packages/Webkul/Shop/package.json             |  3 +-
 .../Shop/src/Resources/assets/js/app.js       |  1 +
 .../Shop/src/Resources/assets/sass/app.scss   |  1 -
 .../Resources/views/layouts/master.blade.php  |  2 +-
 .../views/products/view/gallery.blade.php     | 21 ++++++++++--
 6 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/config/imagecache.php b/config/imagecache.php
index 84f656b19..9dd290040 100755
--- a/config/imagecache.php
+++ b/config/imagecache.php
@@ -9,30 +9,30 @@ return array(
     |
     | Enter the routes name to enable dynamic imagecache manipulation.
     | This handle will define the first part of the URI:
-    | 
+    |
     | {route}/{template}/{filename}
-    | 
+    |
     | Examples: "images", "img/cache"
     |
     */
-   
-    'route' => null,
+
+    'route' => 'cache',
 
     /*
     |--------------------------------------------------------------------------
     | Storage paths
     |--------------------------------------------------------------------------
     |
-    | The following paths will be searched for the image filename, submited 
-    | by URI. 
-    | 
+    | The following paths will be searched for the image filename, submited
+    | by URI.
+    |
     | Define as many directories as you like.
     |
     */
-    
+
     'paths' => array(
-        public_path('upload'),
-        public_path('images')
+        storage_path('app/public'),
+        public_path('storage')
     ),
 
     /*
@@ -41,7 +41,7 @@ return array(
     |--------------------------------------------------------------------------
     |
     | Here you may specify your own manipulation filter templates.
-    | The keys of this array will define which templates 
+    | The keys of this array will define which templates
     | are available in the URI:
     |
     | {route}/{template}/{filename}
@@ -50,11 +50,11 @@ return array(
     | will be applied, by its fully qualified name.
     |
     */
-   
+
     'templates' => array(
-        'small' => 'Intervention\Image\Templates\Small',
-        'medium' => 'Intervention\Image\Templates\Medium',
-        'large' => 'Intervention\Image\Templates\Large',
+        'small' => 'Webkul\Product\CacheFilters\Small',
+        'medium' => 'Webkul\Product\CacheFilters\Medium',
+        'large' => 'Webkul\Product\CacheFilters\Large',
     ),
 
     /*
@@ -65,7 +65,7 @@ return array(
     | Lifetime in minutes of the images handled by the imagecache route.
     |
     */
-   
+
     'lifetime' => 43200,
 
-);
+);
\ No newline at end of file
diff --git a/packages/Webkul/Shop/package.json b/packages/Webkul/Shop/package.json
index 2d948db6a..99bff6f3c 100755
--- a/packages/Webkul/Shop/package.json
+++ b/packages/Webkul/Shop/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "vee-validate": "2.0.0-rc.26",
     "vue-flatpickr": "^2.3.0",
-    "vue-slider-component": "^2.7.5"
+    "vue-slider-component": "^2.7.5",
+    "ez-plus":"^1.2.1"
   }
 }
diff --git a/packages/Webkul/Shop/src/Resources/assets/js/app.js b/packages/Webkul/Shop/src/Resources/assets/js/app.js
index f2e803eba..c9b1938c1 100755
--- a/packages/Webkul/Shop/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Shop/src/Resources/assets/js/app.js
@@ -3,6 +3,7 @@ window.Vue = require("vue");
 window.VeeValidate = require("vee-validate");
 window.axios = require("axios");
 require("./bootstrap");
+require("ez-plus/src/jquery.ez-plus.js");
 
 Vue.use(VeeValidate);
 Vue.prototype.$http = axios
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index d44a9f528..97fd00d64 100755
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -3484,7 +3484,6 @@ section.review {
     }
 }
 
-
 /// rtl css start here
 .rtl {
     direction: rtl;
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
index 15ef436c5..6769eb32c 100755
--- a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
@@ -72,7 +72,7 @@
         </div>
 
     </div>
-    
+
     <script type="text/javascript">
         window.flashMessages = [];
 
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
index 9ddabf46c..2223cb78d 100755
--- a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
@@ -27,8 +27,8 @@
                     <i class="icon arrow-up-white-icon"></i>
                 </li>
 
-                <li class="thumb-frame" v-for='(thumb, index) in thumbs' @mouseover="changeImage(thumb)" :class="[thumb.large_image_url == currentLargeImageUrl ? 'active' : '']">
-                    <img :src="thumb.small_image_url"/>
+                <li class="thumb-frame" v-for='(thumb, index) in thumbs' @mouseover="changeImage(thumb)" :class="[thumb.large_image_url == currentLargeImageUrl ? 'active' : '']" id="thumb-frame">
+                    <img :src="thumb.small_image_url" :data-image="thumb.original_image_url" :data-zoom-image="thumb.original_image_url"/>
                 </li>
 
                 <li class="gallery-control bottom" @click="moveThumbs('bottom')" v-if="(thumbs.length > 4) && this.is_move.down">
@@ -143,4 +143,21 @@
 
     </script>
 
+    <script>
+        $(document).ready(function() {
+            var image = $('#thumb-frame img');
+            var zoomImage = $('img#pro-img');
+
+            zoomImage.ezPlus();
+
+            image.mouseover( function(){
+                $('.zoomContainer').remove();
+                zoomImage.removeData('elevateZoom');
+                zoomImage.attr('src', $(this).data('image'));
+                zoomImage.data('zoom-image', $(this).data('zoom-image'));
+                zoomImage.ezPlus();
+            });
+        })
+    </script>
+
 @endpush
\ No newline at end of file