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

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

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

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

上記のJavaScriptを改造しました。
フェードイン・フェードアウトで自動スライドショーが切り替わる、サムネイル付きのJavaScriptで、コメントも付いています。
改造元と同じように、サムネイル画像マウスオンで自動スライドショーが停止し、サムネイル画像マウスアウトで、サムネイル画像と同じ画像からスライドショーが再開します。
そして、小さなサムネイル画像と拡大画像が、別画像です。

画像というのは、元々大きな画像を縮小表示しても、画像の重さは縮小しません。元の画像と同じ重さです。
だからサムネイルのように大量に重い画像を並べて表示すると、PCの読み込み速度が遅くなります。
そのために、サムネイル用の小さな画像を別に作成する方が、PCに負担がかからないのです。

拡大のスライド画像表示分と同じサムネイル画像に、透過度指定(opacity=0.3)が付いて、サムネイル画像が薄くなります。
この透過度は、CSSで指定します。「#Mbox img.act」の項目で指定します。
CSSでの指定なので、枠線の色を変えたり透過度を変えたり角丸にしたり、複数指定も可能です。

今回の表示配置は「領域(ここでは#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:現在)閉鎖済みです。
後日原本も紹介する予定です。
■2016/09/16:レイアウトや動作がおかしくなるので、拡大画像の「position」指定をJavaScript内でも指定するように変更。