ECサイトに使えそうな画像zoomer「vue-product-zoomer」

vue-product-zoomerとは

vue-product-zoomerは、ECサイトなどで使えそうな画像zoomerを実装できるコンポーネントライブラリです。

サムネイル画像の向きを変更したり、画像zoomerの位置を設定することが可能です。

環境

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install vue-product-zoomer

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/assets/js/app.bundle.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/akulubala/vue-product-zoomer

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import ProductZoomer from 'vue-product-zoomer'

（2）CDNの場合

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

2.メソッドを設定

上記で取得したProductZoomerを Vue.use に取り込みます。

zoomer用の画像データをimagesに設定します。
画像データのnormal_sizeプロパティは必須です。

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

3. テンプレートを準備

<product-zoomer> を設置します。

base-images には、zoomerする画像を設定します。
base-zoomer-options には、サムネイルやzoomerの表示位置を指定できるオプションが設定できます。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <product-zoomer
    :base-images="images"
    :base-zoomer-options="zoomerOptions"
  ></product-zoomer>
</div>

サンプル

See the Pen ECサイトに使えそうな画像zoomer「vue-product-zoomer」 by カバの樹 (@kabanoki) on CodePen.dark

さいごに

ECサイトなどで使えそうな画像zoomerを実装できるコンポーネントライブラリでした。

今日はこの辺でー