Gallery

画像１の説明文をここに入れます

イメージチェンジプログラム（imgchg_pack.js）の使い方

サムネイル画像をクリックすると、大きな写真が入れ替わります。
html側を見れば分かりますが、大きな画像の読みこみ行は２行あります。違う点はidの指定名が異なるだけですが必ず２行入れて下さい。この２枚の画像と、サムネイルの１枚目の画像名は合わせておいて下さい。
サムネイルを増やしたい場合はhtml側のサムネイルの行をコピペで増やし、画像ファイル名やalt指定（今回の場合は大きな写真下に表示される説明文になります）を入れ替えて下さい。

サムネイルと拡大画像は兼用です。
サムネイルのサイズはcssフォルダのstyle.cssの「.thumbnail」のwidthとheightの値で変更できます。小さな端末での再設定がある場合もあるのでチェックしましょう。

画像の縦横比率は全て統一しておいた方が切り替えがスムーズです。
わかりやすいよう、中央のサムネイルだけ画像の高さが他と異なる設定にしているので実際にクリックして状態を見てみて下さい。

写真の枚数を増やす場合、ウィンドウ幅によっては段落ちしてレイアウトが崩れるので、「.thumbnail」のwidthとheightの数字を小さくしてバランスをとって下さい。

バランスを取るのが難しいぐらいの大量の写真を配置する場合、大きな画像の上に配置するのではなく、画像の外側に置いた方がいいでしょう。
style.cssの#item-imageのmargin-bottom: -50px;の１行を削除。
#thumbnail-boxのbottom: 70px;の１行を削除すれば通常の出力場所（説明文の下）に出力されます。

他のテンプレートにパーツを使う場合
画像ブロックのhtmlをそのままコピペ。
html下部の<!-- イメージチェンジ設定 -->からの数行もコピペ。jsフォルダのimgchg_pack.jsをご利用中のjsフォルダに移動。jsフォルダがなければ新規で作るか、htmlのjsファイルの読み込みパスを変更して下さい。
style.cssの「/*galleryページの画像切り替え」ブロックもコピペ。小さな端末の再設定もあるので忘れず。

当サイトのテンプレート以外にパーツを使う場合
当テンプレートに梱包されているjavascriptファイルは全て有限会社クリタス様提供のものです。jsファイルは改変せずにご利用下さい。
また、当サイトのテンプレート「以外」に使いたいなど、「プログラムのみ」を使う場合はこちらの規約をお守り下さい。