Vue.jsの練習で作ったサムネイルプログラム
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
script
LICENSE
README.md
index.html

README.md

TsumioThumbnail

Vue.jsの練習で作ったサムネイルプログラム

導入方法

基本的にはGitHub上で公開しているフォルダ構成を参考に設置してほしい。

  1. Vue.jsの読み込み
    簡単な方法はCDNからの入手。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  1. thumio-thumbnailの読み込み
    scriptsフォルダにあるthumio-thumbnail.jsを読み込む。
<script src="./script/thumio-thumbnail.js"></script>

詳細はindex.htmlを参照してほしい。
3. CSSの読み込み cssフォルダにあるstyle.cssを読み込む。

<link rel="stylesheet" type="text/css" href="./css/style.css">
  1. サムネイルの設置
    設置したい箇所に以下のようなHTMLを書く。
<div id="t-thumbnail">
    <v-thumbnail base="./img/sample" extension="png" max="15" width="140" height="80">
    </v-thumbnail>
</div>

base属性は「対象のフォルダ+基準となるファイル名」。
extension属性は拡張子の指定。
max属性は読み込むサムネイルの数。
width属性とheight属性はサムネイルのサイズ。
今回の場合は「imgフォルダからsample[n].pngを1番から15番まで読み込む」ことになる。
なお、ファイル番号は1から始まる(0始まりではない)。imgフォルダも参照してほしい。

デザインの変更

デザインを変更したい場合、sytle.cssを改変してほしい。

サンプル

ブログに実際に動作するサンプルを設置しています。
記事の一番最後にあります。