物件詳細おすすめ
物件名 | XXアパート 55,000円 |
---|---|
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
物件名 | XXアパート 55,000円 |
---|---|
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
※当プログラムはクリタス様開発のプログラムです。imgchg_pack.jsは改変せずにご利用下さい。
■解説
サムネイル画像をクリックすると、上の大きな写真が入れ替わります。
html側を見れば分かりますが、大きな画像の読みこみ行は2行あります。違う点はidの指定名が異なるだけですが必ず2行入れて下さい。この2枚の画像と、サムネイルの1枚目の画像名は合わせておいて下さい。
サムネイルを増やしたい場合はhtml側のサムネイルの行をコピペで増やし、画像ファイル名やalt指定(今回の場合は大きな写真下に表示される説明文になります)を入れ替えて下さい。
サムネイルと拡大画像は「兼用」です。画像の縦横比率は「すべて統一」しておいた方がきれいに入れ替わります。
※わざと寸法を変更した画像も配置しています。
サムネイルのサイズはcssフォルダのstyle.cssの「.thumbnail」のwidthの値で変更できます。
拡大画像がある領域幅より大きな画像を用意しておいて下さい。領域幅より小さい画像だと、表示に問題が出ます。
imgchg_pack.jsはhtmlの下の方に読み込んでいます。