Added click event to preview Image

README.md

@@ -19,10 +19,22 @@
 > Vue.use(ProductZoomer)
 
 # Usage
+
+### Basic:
+```
+<ProductZoomer
+  :base-images="images"
+  :base-zoomer-options="zoomerOptions"
+/>
+```
+
+### Tracking click on preview image:
 ```
 <ProductZoomer
   :base-images="images"
   :base-zoomer-options="zoomerOptions"
+  :clickEvent="customEventName"
+  @customEventName="someCustomMethod"
 />
 ```
 

src/App.vue

@@ -5,6 +5,8 @@
             <ProductZoomer
               :base-images="images"
               :base-zoomer-options="zoomerOptions"
+              click-event="customEventName"
+              @customEventName="someCustomMethod"
             />
           </div>
           <div>
@@ -218,6 +220,15 @@ export default {
   },
   components: {
     ProductZoomer
+  },
+  methods: {
+    someCustomMethod (previewImage) {
+      //  As parameter we get image that was clicked on
+      //  Do, whatever you want, when user clicked on preview Image
+
+      alert('You clicked on image with id: ' + previewImage.id)
+      console.log(previewImage)
+    }
   }
 }
 </script>

src/components/ProductZoomer.vue

@@ -1,10 +1,11 @@
 <template>
 <div :class="zoomer_box">
     <div class="preview-box" >
-        <img :src="previewImg.url" 
-             :data-zoom="previewLargeImg.url" 
+        <img :src="previewImg.url"
+             :data-zoom="previewLargeImg.url"
              class="responsive-image"
              draggable="false"
+             @click="$emit(clickEvent, previewImg)"
         />
     </div>
     <div class="zoomer-control-box">
@@ -14,14 +15,14 @@
           </slot>
         </div>
         <div class="thumb-list">
-              <img @mouseover="chooseThumb(thumb, $event)" 
+              <img @mouseover="chooseThumb(thumb, $event)"
                   draggable="false"
-                  v-show="key < options.scroll_items" 
-                  :key="key" 
-                  :src="thumb.url" 
-                  @click="chooseThumb(thumb, $event)" 
-                  v-for="(thumb, key) in thumbs" 
-                  class="responsive-image" 
+                  v-show="key < options.scroll_items"
+                  :key="key"
+                  :src="thumb.url"
+                  @click="chooseThumb(thumb, $event)"
+                  v-for="(thumb, key) in thumbs"
+                  class="responsive-image"
                   v-bind:style="{'boxShadow' : thumb.id === choosedThumb.id ? '0px 0px 0px 2px ' + options.choosed_thumb_border_color : ''}"
                   :class="{'choosed-thumb': thumb.id === choosedThumb.id}">
         </div>
@@ -53,6 +54,13 @@ export default {
       default: function() {
         return {};
       }
+    },
+    clickEvent: {
+      type: String,
+      required: false,
+      default: function() {
+        return 'clickedOnImage'
+      }
     }
   },
   data() {
@@ -84,7 +92,7 @@ export default {
       return this.options.namespace + "-pane-container";
     },
     move_button: function() {
-      return this.options.move_button_style === 'chevron' ? 
+      return this.options.move_button_style === 'chevron' ?
               {
                 "left": "chevron-left",
                 "right": "chevron-right"