JavaScript

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

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

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

DEMO デモ

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

公式サイトはこちら

GitHub

使い方

実装コードはこちら。

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,
        caption: "Caption Text2",
        alt: "Alt Text2",
      },
      {
        src: images,
        thumbnail: images,
        caption: "Caption Text3",
        alt: "Alt Text3",
      },
      {
        src: images,
        thumbnail: images,
        caption: "Caption Text1",
        alt: "Alt Text1",
      },
      {
        src: images,
        thumbnail: images,
        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,
          thumbnail: images,
          caption: "Caption Text1",
          alt: "text2",
          key: 2,
        },
        {
          src: images,
          thumbnail: images,
          caption: "Caption Text1",
          alt: "text3",
          key: 3,
        },
        {
          src: images,
          thumbnail: images,
          caption: "Caption Text1",
          alt: "text4",
          key: 4,
        },
        {
          src: images,
          thumbnail: images,
          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!!!!

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です