# Vue Product Zoomer

For the Product Page image gallery we used a Vue.js library named Vue Product Zoomer which is useful for e-Shop Projects.

import { ProductZoomer } from 'vue-product-zoomer';

# Local Usage

components: {
  ProductZoomer
}

# Global Usage

import ProductZoomer from 'vue-product-zoomer'

Vue.use(ProductZoomer)

In this product already this plugin it's globally installed

# Code Example

<template>
  <ProductZoomer
    :base-images="images"
    :base-zoomer-options="zoomerOptions"
  />
</template>

<script>
export default {
  data() {
    return {
      images: {
        normal_size: [
          {
            id: 1,
            url: require("@/assets/img/examples/product1.jpg")
          },
          {
            id: 2,
            url: require("@/assets/img/examples/product2.jpg")
          },
          {
            id: 3,
            url: require("@/assets/img/examples/product3.jpg")
          },
          {
            id: 4,
            url: require("@/assets/img/examples/product4.jpg")
          }
        ],
        large_size: [
          {
            id: 1,
            url: require("@/assets/img/examples/product1.jpg")
          },
          {
            id: 2,
            url: require("@/assets/img/examples/product2.jpg")
          },
          {
            id: 3,
            url: require("@/assets/img/examples/product3.jpg")
          },
          {
            id: 4,
            url: require("@/assets/img/examples/product4.jpg")
          }
        ]
      },
      zoomerOptions: {
        pane: "container-round",
        hoverDelay: 300,
        namespace: "inline-container",
        move_by_click: true,
        scroll_items: 4
      }
    };
  }
};
</script>