Lightboxより簡単？コピペで動く！Vue.jsで使えるサムネ付き超簡単レスポンシブ対応、画像ギャラリースライダー【TinyBox】

どうもsgwです。久しぶりにウェブネタです。

ということで今回はVueで超簡単に作れるレスポンシブ対応、サムネ付きレスポンシブLightBoxを紹介します。CSSとかの編集も特別必要なくササッと実装できちゃうのでめっちゃ楽です。

DEMO デモ

実装するとこんな感じになります。デモはCDNですが、モダンにES6でwebpack使ってもできます。

sgw.today

sgw.today

https://sgw.today/demos/vue-lightBoxCdn

ためになる雑記ブログ

公式サイトはこちら

GitHub

外部リンク

GitHub - kytta/vue-tinybox: 🌌 A slick, yet tiny lightbox gallery for Vue.js

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

🌌 A slick, yet tiny lightbox gallery for Vue.js. Contribute to kytta/vue-tinybox development by creating an account on GitHub.

GitHub

os.kytta.dev

外部リンク

vue-tinybox | A slick, yet tiny lightbox gallery for Vue.js

https://os.kytta.dev/vue-tinybox/

A slick, yet tiny lightbox gallery for Vue.js

使い方

実装コードはこちら。

const images = [
  `https://unsplash.it/300/300/?image=1`,
  `https://unsplash.it/300/300/?image=2`,
  `https://unsplash.it/300/300/?image=3`,
  `https://unsplash.it/300/300/?image=4`,
  `https://unsplash.it/300/300/?image=5`,
  `https://unsplash.it/300/300/?image=6`,
];

new Vue({
  el: "#app",
  components: {
    tinybox: Tinybox,
  },
  data: { 
    index: null,
    isLoading: true,
    images: [
      {
        src: images[0],
        thumbnail: images[0],
        caption: "Caption Text1",
        alt: "Alt Text1",
      },
      {
        src: images[0],
        thumbnail: images[1],
        caption: "Caption Text2",
        alt: "Alt Text2",
      },
      {
        src: images[2],
        thumbnail: images[2],
        caption: "Caption Text3",
        alt: "Alt Text3",
      },
      {
        src: images[3],
        thumbnail: images[3],
        caption: "Caption Text1",
        alt: "Alt Text1",
      },
      {
        src: images[4],
        thumbnail: images[4],
        caption: "Caption Text1",
        alt: "Alt Text1",
      },
      {
        src: images[5],
        thumbnail: images[5],
        caption: "Caption Text4",
        alt: "Alt Text4",
      },
    ],
  },
});

こちらはHTML

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

基本上記をコピペすれば動きます。ただ、使ってる方法によってはこのTiny Boxをどう読み込むかが変わって来るので試した限り書いていきます。

CDN読み込み

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tinybox"></script>
<script src="main.js"></script>

これは簡単です。上記vueから読み込んで、その後vue-tinybox、んで自作JS。

webpackでjsとcssのみコンパイルしてる時のパス

WordPressのテーマ作ってる時によくあるんですが、jsとcss(sass)だけコンパイルしてる時わりとオフィシャルに書いてあるやり方でならない時があるのでメモ。

import Vue from 'vue/dist/vue.min.js'
import Tinybox from 'vue-tinybox'

vueはnode_modulesの中にあるvueディレクトリからパス指定する必要があるみたいですが、vue-tinyboxの方は直接書いても大丈夫。

vue cli使った時

あんまりvueのテンプレとかになれてないのでちょっと苦戦したんですが下記のような感じでテンプレート作れば問題なく動きました。ただvue3では動きませんでした。

<template>
  <div class="container">
    <div
      v-for="(img, idx) in images"
      @click="index = idx"
      class="open-tinybox"
      ref="archive_list_alink"
      v-bind:key="img.alt"
    >
      <img :src="img.thumbnail" :alt="img.alt" />
    </div>
    <Tinybox v-model="index" :images="images" loop> </Tinybox>
  </div>
</template>

<script>
import Tinybox from "vue-tinybox";
export default {
  name: "App",
  components: {
    Tinybox,
  },
  data: function () {
    const images = [
      `https://unsplash.it/300/300/?image=1`,
      `https://unsplash.it/300/300/?image=2`,
      `https://unsplash.it/300/300/?image=3`,
      `https://unsplash.it/300/300/?image=4`,
      `https://unsplash.it/300/300/?image=5`,
      `https://unsplash.it/300/300/?image=6`,
    ];
    return {
      index: null,
      isLoading: true,
      images: [
        {
          src: images[0],
          thumbnail: images[0],
          caption: "Caption Text1",
          alt: "text1",
          key: 1,
        },
        {
          src: images[1],
          thumbnail: images[1],
          caption: "Caption Text1",
          alt: "text2",
          key: 2,
        },
        {
          src: images[2],
          thumbnail: images[2],
          caption: "Caption Text1",
          alt: "text3",
          key: 3,
        },
        {
          src: images[3],
          thumbnail: images[3],
          caption: "Caption Text1",
          alt: "text4",
          key: 4,
        },
        {
          src: images[4],
          thumbnail: images[4],
          caption: "Caption Text1",
          alt: "text5",
          key: 5,
        },
        {
          src: images[5],
          thumbnail: images[5],
          caption: "Caption Text1",
          alt: "text6",
          key: 6,
        },
      ],
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

なぞにvue3で動かなすぎて時間かけてしまったw

おしゃれに実装できるし、スタイリングの設定無しで動くのでおすすめ。ワードプレスで作ったサイトにぶちこんだ経験あるんですが、モバイル、パソコンともに完璧な動作でした。

それではSeeeee Yaaaaaa!!!!

sgw

フロントエンド

XFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。