サムネイル11■別画像自動スライドコメ付リンク付    最終修正日 : 2016/09/14

■サムネイル(小さな画像)マウスオンで自動スライドが停止し、
マウスアウトでマウスオンした画像から自動スライドが再開します。
拡大画像はリンク付きです。
ただし最後の5枚目だけは、リンク無しの見本です。

●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:画像先読み追加。