目次
vue-product-zoomerとは
vue-product-zoomerは、ECサイトなどで使えそうな画像zoomerを実装できるコンポーネントライブラリです。
サムネイル画像の向きを変更したり、画像zoomerの位置を設定することが可能です。
環境
Vue | 2.6.10 |
vue-product-zoomer | 3.0.0 |
インストール
以下の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を実装できるコンポーネントライブラリでした。
今日はこの辺でー