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

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

●2016/09/16:即時関数で囲んで、グローバル変数を消しました。

フェードが付かないJavaScriptはこちら → サムネイル11■別画像自動スライドコメ付リンク付

上記のJavaScriptを改造しました。
サムネイル(小さい画像)付きの自動スライドショーのJavaScriptで、コメントとリンク付きです。
サムネイル画像をマウスオンするとスライドショーが停止し、サムネイル画像マウスアウトで、サムネイル画像と同じ画像からスライドショーが再開します。
そして、小さなサムネイル画像と拡大画像が、別画像です。

一見とても複雑なレイアウトに見えますが、基本はサムネイル8■同一画像自動スライドコメ付と同じです。
拡大画像「id="Bs"(またはid="Bga")」「サムネイル画像領域(id="Mbox")」「コメント領域(id="Me"またはid="Com")」を組み合わせて、CSSで装飾するだけです。
今回のレイアウトの特徴は、サムネイルの表示を120px60pxの実寸ではなく、ブラウザの画面表示の「横幅20%表示」にしている点です。
そのためウィンドウの大きさを変えると、サムネイルの表示サイズが変化します。
こんなレイアウトもできますという見本で作成しただけで、普通にサムネイルの実寸表示にしてもかまいません。

今回の表示配置は「領域(ここでは#waku)を基準にして、画像やコメントを配置するAllAboutを参考にしました。
■2016/09/24:上記の「AllAbout」の指定方法だと、ブラウザIE11ではフェードが動作しなくなることがありました。ローカルでは動作しますが、アップロードすると動作しません。そのため別の指定方法に変更しました。
■2016/09/27:それでもブラウザIE11のみフェードが不安定なので、さらに1行追加。



原本は「http://www.fabulant.com」の「Slideshow with thumbnail gallery and zoom-effects(by Peter Gehrig)」で、簡単な機能のみを分離し、フェード部分を少し改造して作成しました。
原本サイトは現在(2016/09/02:現在)閉鎖済みです。
後日原本も紹介する予定です。
■リンクのターゲット指定の説明はこちらから。今回はリンクを付けた拡大画像は停止しないので、現状保存はできませんが。