product zoom functionality added

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,
 
-);
+);

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"
   }
 }

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

packages/Webkul/Shop/src/Resources/assets/sass/app.scss

@@ -3484,7 +3484,6 @@ section.review {
     }
 }
 
-
 /// rtl css start here
 .rtl {
     direction: rtl;

packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php

@@ -72,7 +72,7 @@
         </div>
 
     </div>
-    
+
     <script type="text/javascript">
         window.flashMessages = [];
 

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