Vue

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/assets/js/app.bundle.min.js"></script>
<div id="app">
  <product-zoomer
    :base-images="images"
    :base-zoomer-options="zoomerOptions"
  ></product-zoomer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  font-family: Helvetica;
}

Vue

const ProductZoomer = window['ProductZoomer'].default;

Vue.use(ProductZoomer);

new Vue({
  el: '#app',
  data: {
    images: {
      'thumbs': [
        {'id':'id-1', 'url': 'https://www.kabanoki.net/wp-content/uploads/2020/03/0bb0967c26c457fa1721279ec265e655-150x150.png'},
        {'id':'id-2', 'url': 'https://www.kabanoki.net/wp-content/uploads/2020/02/ae5f1e3a35457c937f15951b9c061c88-150x150.png'}
      ],
      'normal_size':[
        {'id':'id-1', 'url': 'https://www.kabanoki.net/wp-content/uploads/2020/03/0bb0967c26c457fa1721279ec265e655-300x174.png'},
        {'id':'id-2', 'url': 'https://www.kabanoki.net/wp-content/uploads/2020/02/ae5f1e3a35457c937f15951b9c061c88-300x155.png'}
      ],
      'large_size':[
        {'id':'id-1', 'url': 'https://www.kabanoki.net/wp-content/uploads/2020/03/0bb0967c26c457fa1721279ec265e655.png'},
        {'id':'id-2', 'url': 'https://www.kabanoki.net/wp-content/uploads/2020/02/ae5f1e3a35457c937f15951b9c061c88.png'}
      ]
    },
    zoomerOptions: {
        zoomFactor: 3, 
        pane: 'pane', // ['pane', 'container-round', 'container']
        hoverDelay: 300,
        namespace: 'zoomer',
        move_by_click:false,
        scroll_items: 5,
        choosed_thumb_border_color: "#bbdefb",
        scroller_button_style: "line",
        scroller_position: "left",
        zoomer_pane_position: "right"
    }
  }
});