サムネイル9■同一画像自動スライドコメ付リンク付    UP日時 : 2016/09/06

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

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

マウスオンで説明文が出るtitle付きのJavaScriptはこちら → サムネイル6■同一画像自動スライドtitle付

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

小さなサムネイル画像も拡大画像も、同じ画像をサイズ指定を変えて使用しているので、あまり重い画像には向きません。
画像は同一サイズを使用して下さい。
拡大のスライド画像表示分と同じサムネイル画像に、赤い外枠線と透過度が付きます。
この赤い外枠線と透過度は、CSSで指定します。「#Mbox img.act」の項目で指定します。
CSSでの指定なので、枠線の色を赤ではなく別の色に指定してもいいし、枠線ではなく透過度を変えたり角丸にしたり、複数指定も可能です。
今回、枠線(border)ではなく外枠線(outline)を使用しているのは、横余白の無いピッタリ配置にしているので、レイアウトをズレさせないためです。
こういうCSSの装飾はJavaScriptとは無関係なので、お好みで変更して下さい。

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

拡大画像と縮小画像が別の画像のJavaScriptはこちら → サムネイル11■別画像自動スライドコメ付リンク付
フェードイン・アウト切替のJavaScriptはこちら → サムネイル9F■フェード同一画像自動スライドコメ付リンク付