●2016/08/27:即時関数で囲んで、グローバル変数を消しました。
拡大と縮小画像が同じ画像のJavaScriptはこちら → サムネイル2■同一画像スライド・コメ付
上記のJavaScriptを改造しました。
コメントの付いたサムネイルのスライドです。
改造元と同じく、クリックか、マウスオーバーかは、JavaScriptのソースの中で選択して下さい。
改造元と違うのは、
小さなサムネイル画像と拡大画像が、別画像である点です。
画像というのは、元々大きな画像を縮小表示しても、画像の重さは縮小しません。元の画像と同じ重さです。
だからサムネイルのように大量に重い画像を並べて表示すると、PCの読み込み速度が遅くなります。
そのために、サムネイル用の小さな画像を別に作成する方が、PCに負担がかからないのです。
画像やコメントの配置用に「#waku」を指定してますが、この「#waku」はJavaScriptとは無関係なので、削除してもかまいません。
「#Mini」「#Big」「#Me」を並べるだけでもいいし、「#waku」の代わりに「テーブル(table)」等を利用してもいいです。
今回は「領域(ここでは#waku)を基準にして、画像やコメントを配置する
AllAboutを参考にしました。
即時関数のonclickの記述方法は、
Qiitaを参考にしました。
フェードが付いて、マウスオーバーのみのJavaScriptはこちら → サムネイル3F■フェード別画像スライドコメント付
■2016/08/28:a(b)をa()へ修正。
■2016/09/06:CSSの位置指定のミスを修正。