Nuxt.jsで画像ギャラリーを実装

Nuxt.jsで画像がポップアップするギャラリーを作成する方法になります。
イメージは下記の感じです。

今回は【vue-image-lightbox】を使用しました。【vue-image-lightbox】は、Vue.jsのLightboxライブラリです。

まずは、【vue-image-lightbox】をインストールします。

npm install vue-image-lightbox vue-lazyload

(yarnの場合は下記コマンド↓)

yarn add vue-image-lightbox vue-lazyload

Nuxt.jsのディレクトリ構成は下記のようになっています。

pluginsディレクトリにファイルを作成しvue-lazyloadをインポートします。
(vue-image-lightboxを使用する為には、vue-lazyloadが必要な為)

今回はmain.jsと言うファイルを作成しました。

main.js

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad)

次にnuxt.config.jsを編集していきます。

nuxt.config.js

export default {
  plugins: [
    { src: '~/plugins/main.js'}
  ],
}

あとは、画像ギャラリーを使用したいcomponentsで【vue-image-lightbox】をインポートします。

vue


<script>
import LightBox from "vue-image-lightbox";
require("vue-image-lightbox/dist/vue-image-lightbox.min.css");
export default {
    components: {
    LightBox,
  },
};
</script>

使用例は下記の通りです。

vue

<template>
  <button @click="showLightbox(0)"></button>
  <button @click="showLightbox(2)"></button>
  <button @click="showLightbox(3)"></button>
  <LightBox ref="lightbox" :images="images"></LightBox>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'http://example.com/image.jpg'},
        { src: 'http://example.com/image2.jpg'},
        { src: 'http://example.com/image3.jpg'}
      ]
    };
  },
  methods: {
    showLightbox(index) {
      this.$refs.lightbox.showImage(index);
    }
  }
};
</script>

this.$refs.lightbox.showImage()ギャラリーを表示させるメソッドです。他にも、nextImage()、previousImage()と言ったメソッドもあります。

また、自動再生やキャプション表示などのオプションの指定も可能です。
例えば下記のような感じです。

<LightBox ref="lightbox" :images="images" :show-light-box="false" :show-thumbs="false">
</LightBox>

詳しいメソッドやオプションの種類は下記に掲載されています。

【vue-image-lightbox】

最後に

今回はvue.jsで簡単に画像ギャラリーを実装できる【vue-image-lightbox】を使ってみました。
ちょうどポートフォリオサイトをNuxt.jsで作っており、作品の紹介などで画像ギャラリーを実装したかったので・・・
オプションも豊富なので、かなり使いやすいです。