●2016/09/07:即時関数で囲んで、グローバル変数を消しました。
拡大と縮小画像が同じ画像のJavaScriptはこちら → サムネイル9■同一画像自動スライドコメ付リンク付
上記のJavaScriptを改造しました。
サムネイル(小さい画像)付きの自動スライドショーのJavaScriptで、コメントとリンク付きです。
サムネイル画像をマウスオンするとスライドショーが停止し、サムネイル画像マウスアウトで、サムネイル画像と同じ画像からスライドショーが再開します。
改造元と違うのは、
小さなサムネイル画像と拡大画像が、別画像である点です。
一見とても複雑なレイアウトに見えますが、基本は
サムネイル8■同一画像自動スライドコメ付と同じです。
拡大画像「id="Bbox"(またはid="Bga")」「サムネイル画像領域(id="Mbox")」「コメント領域(id="Com")」を組み合わせて、CSSで装飾するだけです。
今回のレイアウトの特徴は、サムネイルの表示を120px60pxの実寸ではなく、ブラウザの画面表示の「横幅20%表示」にしている点です。
そのためウィンドウの大きさを変えると、サムネイルの表示サイズが変化します。
こんなレイアウトもできますという見本で作成しただけで、普通にサムネイルの実寸表示にしてもかまいません。
今回の表示配置は「領域(ここでは#waku)を基準にして、画像やコメントを配置する
AllAboutを参考にしました。
原本は「http://www.fabulant.com」の「Slideshow with thumbnail gallery and zoom-effects(by Peter Gehrig)」で、簡単な機能のみを分離して作成しました。
原本サイトは現在(2016/09/02:現在)閉鎖済みです。
後日原本も紹介する予定です。
■リンクのターゲット指定の説明はこちらから。今回はリンクを付けた拡大画像は停止しないので、現状保存はできませんが。
フェードイン・アウト切替のJavaScriptはこちら → サムネイル11F■フェード別画像自動スライドコメ付リンク付
■2016/09/14:画像先読み追加。