Concept
この「Thumbnail-Gallery」は、指定のscriptファイルの読み込みと、div要素に特定のクラス名を記述をするだけで、
サムネールによる画像切り替えが可能なUIを、簡単にHTMLファイルに組み込むことを目的に作成しました。
指定のjsファイル・cssファイルを読み込み、divにクラス名を記述するだけでサムネール付きのギャラリーが生成されます。
生成されたサムネールをクリックすることで、ギャラリーの画像が切り替わります。
Examples
How to Use
ヘッド要素内に以下のファイルを読み込みます。
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/thumb_gallery.js"></script>
<link rel="stylesheet" type="text/css" href="css/thumb_gallery.css">
</head>
下記のように、div要素にクラス属性「display_image」を記述し、そのdiv要素内にimg要素をリストで配置します。
<div class="display_image">
<ul>
<li><img src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須" alt="画像01"></li>
<li><img src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須" alt="画像02"></li>
<li><img src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須" alt="画像03"></li>
<li><img src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須" alt="画像04"></li>
<li><img src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須" alt="画像05"></li>
</ul>
</div>
以上で完了です。
-注意点-
※div要素内のリストは、ul要素にのみ対応しています。
※挿入するimg要素のwidth属性とheight属性は必ず指定してください。
※各画像のサイズが統一されていなくても、問題なく動作しますが、
各画像の縦横比（特に高さ）は統一されている、もしくは、ある程度近い数値である事を推奨します。