サムネイル7F■フェード背景サムネ同一画像自動スライドtitle付    最終修正日 : 2016/09/16

サムネイル(小さな画像)マウスオンで自動スライドが停止し、マウスアウトでマウスオンした画像から自動スライドが再開します。

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

フェードが付かないJavaScriptはこちら → サムネイル7■背景サムネ同一画像自動スライドtitle付

上記のJavaScriptを改造しました。
フェードイン・フェードアウトで自動スライドショーが切り替わる、サムネイル付きのJavaScriptです。
改造元と同じように、サムネイル画像マウスオンで自動スライドショーが停止し、サムネイル画像マウスアウトで、サムネイル画像と同じ画像からスライドショーが再開します。
サムネイル画像にはtitleが入っているので、マウスオンで画像説明が出ます。

他のサムネイルのJavaScriptと違う点は、サムネイル画像の作成方法です。
小さなサムネイル画像も拡大画像も同じ画像を使用しているので、あまり重い画像には向きません。
ただし、サムネイル画像は縮小画像ではありません。
拡大画像と同じ大きさのまま背景画像にして、その中央部分だけを切り取って、サムネイル表示をしています。
この操作はJavaScriptの中で行っています。
そのためCSSでの装飾が、「#Mbox img」ではなく、「#Mbox div」に変更になっています。
「#Mbox」というサムネイルの全体領域の中に、「小さなimg」を並べるのではなく「小さなdiv」を並べているのです。
この方法は、サムネイル用に別に画像を作ったかのような、面白い効果が出ます。

原本は「http://www.fabulant.com」の「Slideshow with thumbnail gallery and zoom-effects(by Peter Gehrig)」で、簡単な機能のみを分離し、フェード部分を少し改造して作成しました。
原本サイトは現在(2016/09/02:現在)閉鎖済みです。
後日原本も紹介する予定です。
■2016/09/15:不要部分削除。簡略化。
■2016/09/16:「z-index:1;」削除。サムネイルを拡大画像上に重ねて表示する場合に、消えないようにするため。