忘れないように記録しとこ

カバの樹

シンプルなライトボックスギャラリーコンポーネント「vue-tinybox」

完全版を表示する

vue-tinyboxとは

vue-tinyboxは、非常にシンプルなライトボックスギャラリーコンポーネントです。

余計な装飾は一切無く、それゆえに異常なほど軽いライブラリとなっています。

 

 

環境

Vue 2.6.10
vue-tinybox 1.0.0

 

インストール

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

npm

npm install vue-tinybox

yarn

yarn add vue-tinybox

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-tinybox"></script>

 

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

https://github.com/NickKaramoff/vue-tinybox

 

導入手順

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

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

import Tinybox from "vue-tinybox";
// or
const Tinybox = require('vue-tinybox');

（2）WEBページの場合

const Tinybox = window['Tinybox'];

2.メソッドを設定

Tinybox をcomponentsに取り込みます。

new Vue({
  el: '#app',
  components: {
    'tinybox': Tinybox
  },
  data: {
    index: null,
    images: [
      {
        src:'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari07_ojisan.png',
        alt: 'himan_pocchari07_ojisan',
        thumbnail: 'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari07_ojisan.png'	
      },
      {
        src:'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari08_obasan.png',
        alt: 'himan_pocchari08_obasan',
        thumbnail: 'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari08_obasan.png'	
      },
      {
        src:'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu7_obasan.png',
        alt: 'agura_kutsurogu7_obasan',
        thumbnail: 'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu7_obasan.png'	
      },
      {
        src:'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu3_ojisan.png',
        alt: 'agura_kutsurogu3_ojisan',
        thumbnail: 'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu3_ojisan.png'	
      }
    ]
  }
});

3. テンプレートを準備

<tinybox> を設置します。

 

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

<div id="app">
  <tinybox
    v-model="index"
    :images="images"
  ></tinybox>
  <img
    v-for="(img, idx) in images"
    :src="img.thumbnail"
    :alt="img.alt"
    class="open-tinybox"
    @click="index = idx"
  >
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

非常にシンプルなライトボックスギャラリーコンポーネントです。

 

今日はこの辺でー

 

  • B!