Nuxt.jsで写真のポートフォリオサイトを作る

<template>
  <viewer :images="images">
    <img v-for="name in images" , :src="`/images/${name}`" , :alt="name" />
  </viewer>
</template>

<script>
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)

export default {
  data() {
    return {
      images: ['image01.jpg', 'image02.jpg', 'image03.jpg', 'image04.jpg'],
    }
  },
}
</script>

viewer コンポーネントに画像ファイル名の配列 images を渡し，その内部で v-for を使って順に取り出し <img> で展開すればビュワーが利用できます．

ちなみに，上記の例では @/static/images ディレクトリに画像が格納されているものとしており，ディレクトリ構造に応じて変更が必要です．

この他に，より快適に利用するために付随する機能を二つ紹介します．

オプションの設定

ツールバーの内容などはオプションを設定することで制御できます．これを使えば，各機能ボタンの表示・非表示やボタン自体の大きさを変更可能です，

各機能に対して数字を割り当てることで表示する条件を指定できます．0 は常に非表示，1-4 は画面幅に応じて表示・非表示が切り替わります．

Vue.use(Viewer, {
  defaultOptions: {
    toolbar: {
      zoomIn: 2,
      zoomOut: 2,
      oneToOne: 2,
      reset: 2,
      prev: 1,
      play: {
        show: 1,
        size: 'large',
      },
      next: 1,
      rotateLeft: 2,
      rotateRight: 2,
      flipHorizontal: 2,
      flipVertical: 2,
    },
  }
)

サムネイルの使用方法

<template>
  <viewer :images="images">
    <img v-for="name in images" , :src="`/thumbnails/${name}`" , :alt="name" />
  </viewer>
</template>

<script>
...
Vue.use(Viewer, {
  defaultOptions: {
    url(image) {
      return image.src.replace("thumbnails", "images");
    },
  },
});
</script>

Viewer.js 自体にサムネイル生成機能はありませんが，src を置き換える機能を使ってサムネイルを指定することができます，

上記の例では thumbnails, images ディレクトリにそれぞれ同一ファイル名のサムネイル画像とオリジナル画像を用意したとき，画像一覧ではサムネイル画像を使用し，それぞれの画像をタップするとオリジナル画像が開かれるようになっています．

オプションで src の thumbnails を images に置き換えるように指定しているからです．

サムネイルも自動で生成したい場合は Nuxt.js で画像編集ライブラリ sharp を用いた自作モジュールを作成すれば可能です．

mktia's note

デモサイト

Viewer.js

Nuxt.js への導入方法

オプションの設定

サムネイルの使用方法