サムネイル８Ｆ■フェード同一画像自動スライドコメ付

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

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

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

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

小さなサムネイル画像も拡大画像も、同じ画像をサイズ指定を変えて使用しているので、あまり重い画像には向きません。
画像は同一サイズを使用して下さい。
拡大のスライド画像表示分と同じサムネイル画像に、赤い枠線と角丸が付きます。
この赤い枠線と角丸は、CSSで指定します。「#Mbox img.act」の項目で指定します。
CSSでの指定なので、枠線の色を赤ではなく別の色に指定してもいいし、枠線ではなく透過度を変えたり角丸にしたり、複数指定も可能です。

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サムネイル８Ｆ■フェード同一画像自動スライドコメ付</title>

<!--★コピーここから-->
<style type="text/css"><!--

/*■この#wakuはJavaScriptとは無関係。画像の配置用に指定したので、不要なら削除*/
#waku{
margin:0 auto;/*★位置指定(上下、左右）*/
width:450px;/*★横幅。拡大画像横幅より大きめに指定。縦幅はサムネイルの数によって変わるので指定しない。お好みで*/
}

#Bs{
width:400px;/*★必須。拡大画像の横幅*/
height:265px;/*★必須。拡大画像の縦幅*/
border:solid 5px #acf;/*★枠線指定。水色*/
}

#Me{
font-size:13px;/*★コメントの文字サイズ*/
color:#00f;/*★コメントの文字色青色*/
text-align:center;/*★コメントの中央位置指定*/
margin-bottom:10px;/*★コメントとサムネイル全体領域#Mboxとの余白/
width:400px;/*★コメントの横幅指定。見本は拡大画像の横幅と同じ指定だが、お好みで*/
}

#Mbox img{
margin-right:8px;/*★サムネイル1個同士の横の余白*/
width:70px;/*★サムネイル1個の表示横幅指定。縦幅は自動になる*/
border:solid 2px #acf;/*★サムネイル1個の枠線指定　水色*/
}

/*★★★必須。後ろにclass指定の「.act」を必ず付ける。サムネイル変化用の指定。変化自体は枠線でなく、透過度でも角丸でも可*/
#Mbox img.act{border:solid 2px #f00; border-radius:10px;}/*★枠線指定赤色と角丸指定*/

--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<p style="text-align:center; color:#00f; margin-top:30px;">■サムネイル（小さな画像）マウスオンで自動スライドが停止し、マウスアウトでマウスオンした画像から自動スライドが再開します。</p>

<!--★ここからコピー-->
<div id="waku"><!--■画像の配置用。JavaScriptとは無関係なので、不要なら削除しても可-->
<div id="Bs"></div><!--★拡大画像指定。id="Bs"は必須-->
<div id="Me"></div><!--★コメント指定。 id="Me"は必須-->
<div id="Mbox"></div><!--★サムネイル指定 id="Mbox"は必須-->
</div><!--■配置用の#wakuの終了。不要なら削除しても可-->

<script type="text/javascript"><!--
/*=====================================================================
フェードの同一画像サムネイル自動スライドコメント付き：Slideshow with thumbnail gallery and zoom-effects（by Peter Gehrig）
Copyright (c) 2011 Peter Gehrig. All rights reserved.（http://www.fabulant.com on the webpage）★2016/09/16 ズーム削除フェード改造
即時関数のonclickの参考サイト：http://qiita.com/kyoshiro-obj/items/96890ffe973d3bec0547
=======================================================================*/
(function (){ var n=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とコメントの同時指定。増減可能。['画像','コメント'];　の２個をこの順番で記述。コメントにタグも使用可能
var ga=[];
ga[n++]=['gy3.jpg','かわいい子猫'];
ga[n++]=['muka22.jpg','オレンジ色の夕日'];
ga[n++]=['pt16r.jpg','白い綿毛のタンポポ'];
ga[n++]=['fr4.jpg','大空を見上げるヒマワリ'];
ga[n++]=['fr5.jpg','プラハの街の<span style="color:red;">赤い</span>屋根'];

var myurl="";   //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=3000;   //★スライドショーの切替速度。1000=1秒
var Fspd=30;　　//★原本20。フェードの変化速度。小さいほど速い

//指定ここまで--------------------------------------------------------------------------
function $(id){ return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var i=0,j=0,fade=0;
var stopid,timer, pic,p_under;
var moveon=true;
var w=Bs.clientWidth, h=Bs.clientHeight;//同一画像サイズ
var cssB="position:absolute; top:0; left:0;width:"+w+"px; height:"+h+"px;";
var bbb="<div style='"+cssB+"' id='B_under'></div>";
bbb +="<div style='"+cssB+"' id='Bbox'>";
$("Bs").innerHTML=bbb;//拡大画像用
$("Bs").style.position="relative";//■追加。1セットにまとめるため
function ary() {
pic="<img  src="+myurl+ga[i][0]+" style='"+cssB+"'>";
$('Bbox').innerHTML=pic;
$('Me').innerHTML=ga[i][1];
}
function setP() {
for (j=0;j<n;j++) {$(j).className="";}
$(i).className="act";
if (moveon) {
if (fade<=100) {
ary();
$('Bbox').style.opacity=(fade)/100;
fade+=5;
timer=setTimeout(setP,Fspd);
}
else {clearTimeout(timer);timer=setTimeout(finL,spd);}
}
else {clearTimeout(timer);stopA();}
}
function finL() {
if (moveon){
clearTimeout(timer);
fade=0;
p_under="<img src="+myurl+ga[i][0]+" style='"+cssB+"'>";
$('B_under').innerHTML=p_under;//■追加
i++; if (i>=n) {i=0}
timer=setTimeout(setP,Fspd);
}
else {clearTimeout(timer);stopA();}
}
function onmsover(mm) {
stopid=mm.id;
for (j=0;j<n;j++) {$(j).className="";}
$(stopid).className="act";
moveon=false;
}
function onmsout(mm){ moveon=true; i=mm.id; clearTimeout(timer); setP();}
function stopA() {
pic="<img src="+myurl+ga[stopid][0]+" style='"+cssB+" opacity:1;'>";
$('Bbox').innerHTML=pic;
$('Me').innerHTML=ga[stopid][1];
fade=100;//■原本0だが停止時に消えないよう修正
}
var sss="";
for (j=0;j<n;j++) {sss +="<img src="+myurl+ga[j][0]+" id='"+j+"'>";}
$("Mbox").innerHTML=sss;//サムネイル用
var b=$("Mbox").getElementsByTagName("img");
function a(){
for (j=0; j<n; j++){
var fnc1=(function (j){ return function (){onmsover(this); }}(j));
var fnc2=(function (j){ return function (){onmsout(this); }}(j));
b[j].onmouseover=fnc1;b[j].onmouseout=fnc2;
}
setP();
}
a();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

サムネイル８Ｆ■フェード同一画像自動スライドコメ付 最終修正日 : 2016/09/16

　サムネイル８Ｆ■フェード同一画像自動スライドコメ付　　　　最終修正日 : 2016/09/16