Vue.js lingalleryを利用してシンプルなギャラリーを実装する

Vue.js lingalleryを利用してシンプルなギャラリーを実装する

vue.jsのライブラリである 「lingallery」をインストールすると、シンプルなギャラリーを簡単に作成することができます。ここでは、 lingalleryを利用するための手順と簡単な使い方を記述してます。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1

Vue環境構築

下記のコマンドで構築。今回は、vueappという名前でプロジェクトを作成してます。

vue create vueapp

プロジェクト作成時は、defaultを選択してます 。

Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)

lingalleryインストール

下記の手順でインストールします。

## 移動
cd vueapp

## インストール
npm i -S lingallery

lingallery 使い方

src配下のApp.vueを下記のように編集します。

<template>
  <div class="container">    
      <logo />
      <lingallery :iid.sync="currentId" :width="width" :height="height" :items="items"/>
  </div>
</template>

<script>


export default {
  components: {
    Lingallery
  },
  data() {
      return {
        width: 800,
        height: 600,
        items: [{
          src: 'https://cdn.pixabay.com/photo/2020/02/04/10/42/camping-4817872_960_720.jpg',
          thumbnail: 'https://cdn.pixabay.com/photo/2020/02/04/10/42/camping-4817872_960_720.jpg',
          caption: 'キャプション名1',
          id: 'someid1'
        },
        {
          src: 'https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg',
          thumbnail: 'https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg',
          caption: 'キャプション名2',
        },
        ]
        ,currentId: null,        
        };
    },
};
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

起動します。

npm run serve

ブラウザから http://プライベートIP:8080 に アクセスすると、 ギャラリー が作成されていることが確認できます。