シンプルなフォトギャラリーを設置することが出来る、thumb_gallery.jsをご紹介します。何を隠そうこのスクリプトは生徒さんの作品になります!!。僅か半年足らずで未経験からここまで登り詰めるとは・・・。K野さん脱帽です!!参りました!!(笑)。
まだ、K野さん自身のサイトが無いため、リンクが張れないですがK野さんのサイトが完成次第リンクを張る予定です。
とりあえずの動作サンプルはこちら!!
ではではさっそく使い方の説明をしていこうと思います。
ファイルのダウンロード
こちらからファイル一式ダウンロードしてください。
ダウンロードして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属性は必ず指定してください。
※各画像のサイズが統一されていなくても、問題なく動作しますが、各画像の縦横比（特に高さ）は統一されている、もしくは、ある程度近い数値である事を推奨します。
