●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内でも指定するように変更。