ファイルのダウンロード

 
こちらからファイル一式ダウンロードしてください。
 
ダウンロードしてzipファイルを解凍したら自分のサイトの中に下記のソースコードを記述。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/thumb_gallery.js"></script>
<link href="css/thumb_gallery.css" rel="stylesheet" type="text/css"> 

フォトギャラリー部分のHTMLマークアップ

<div class="display_image">
 <ul>
  <li><img alt="画像01" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像02" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像03" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像04" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像05" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
 </ul>
</div>

上記のように、div要素にクラス属性「display_image」を記述し、その中にリスト(※<ul>)で画像を配置します。・・・終了です。なんとシンプルでなんと設定しやすいスクリプトだこと。K野さん恐るべし!!
 

注意点

 
※div要素内のリストは、ul要素にのみ対応しています。

※挿入するimg要素のwidth属性とheight属性は必ず指定してください。

※各画像のサイズが統一されていなくても、問題なく動作しますが、各画像の縦横比（特に高さ）は統一されている、もしくは、ある程度近い数値である事を推奨します。