サムネイル９■同一画像自動スライドコメ付リンク付

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

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

マウスオンで説明文が出るtitle付きのJavaScriptはこちら　→　サムネイル６■同一画像自動スライド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はこちら　→　サムネイル１１■別画像自動スライドコメ付リンク付
フェードイン・アウト切替のJavaScriptはこちら　→　サムネイル９Ｆ■フェード同一画像自動スライドコメ付リンク付

<!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:600px;/*★横幅。見本は拡大画像横幅と同じで指定。縦幅はサムネイルの数やコメント縦幅によって変わるので指定しない。お好みで*/
border:solid 5px #000;/*★枠線指定。黒色*/
background:#000;/*★背景色指定。枠線と同じ黒色。この色が拡大画像とサムネイル領域の縦余白の色とコメントの背景色になります。お好みで*/
}

#Bbox{
width:600px;/*★必須。拡大画像の横幅*/
height:250px;/*★必須。拡大画像の縦幅*/
margin-bottom:5px;/*★拡大画像とサムネイル領域との余白。黒の横線に見える部分です。不要なら削除*/
}

#Com{
font-size:13px;/*★コメントの文字サイズ*/
color:#eee;/*★コメントの文字色。薄い灰色*/
text-align:center;/*★コメントの中央位置指定*/
width:100%;/*★コメントの横幅指定。見本は#wakuいっぱい指定。お好みで*/
}

#Mbox img{
width:120px;/*★サムネイル1個の表示横幅指定。縦幅は自動になる。今回は拡大画像横幅600px÷5(サムネイル枚数)=120pxで計算。お好みで*/
opacity:0.5;/*★透過度50%*/
}

/*★★★必須。後ろにclass指定の「.act」を必ず付ける。サムネイル変化用の指定。変化自体は枠線でなく、透過度でも角丸でも可*/
#Mbox img.act{ outline:solid 3px #f00; opacity:1;}/*★外枠線指定赤色。レイアウトのズレ防止のためoutlineを使用。透過度完全不透明100%*/

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

</head>
<body>

<p style="text-align:center; color:#00f; margin-top:30px;">■サムネイル（小さな画像）マウスオンで自動スライドが停止し、マウスアウトでマウスオンした画像から自動スライドが再開します。<br>
<strong>拡大画像</strong>はリンク付きです。ただし最後の5枚目だけは、リンク無しの見本です。</p>

<!--★ここからコピー-->
<div id="waku"><!--■画像の配置用。JavaScriptとは無関係なので、不要なら削除しても可-->
<div id="Bbox"></div><!--★拡大画像領域指定。 id="Bbox"は必須-->
<div id="Mbox"></div><!--★サムネイル指定 id="Mbox"は必須-->
<div id="Com"></div><!--★コメント指定。 id="Com"は必須-->
</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/06ズーム部分削除
即時関数のonclickの参考サイト：http://qiita.com/kyoshiro-obj/items/96890ffe973d3bec0547
=======================================================================*/
(function (){ var n=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★同時指定。増減可能。['画像','コメント','リンク'];の３個をこの順番で記述。リンク無しの時は['画像','コメント',''];で
//★コメントにタグも使用可能
var ga=[];
ga[n++]=['pt25.jpg','モニュメント・バレーB','http://ijichi.easter.ne.jp/'];
ga[n++]=['pt26.jpg','モニュメント・バレーC','http://www.openspc2.org/'];
ga[n++]=['pt27.jpg','アンテロープ・キャニオン','http://cya.sakura.ne.jp/java/index.htm'];
ga[n++]=['pt28.jpg','アンテロープの<span style="color:red;">オオカミ岩</span>','http://ayanaotakashun.com/'];
ga[n++]=['../bg/pt8.jpg','ホースシュー・ベント',''];//■リンク無しの見本

var myurl="";    //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=3000;    //★スライドショーの切替速度。1000=1秒
var tgt="_new";  //★リンクのtarget指定。「_top」「_new」等。ブラウザによって、リンク先から戻った時の動作が違います

//指定ここまで--------------------------------------------------------------------------
function $(id){ return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var i=0, j=0, stopid=0, timer, pic;
var moveon=true;
function ary() { 
pic=(ga[i][2]!="")?"<a href="+ga[i][2]+"><img src="+myurl+ga[i][0]+"></a>":"<img src="+myurl+ga[i][0]+">";
$("Bbox").innerHTML=pic;
$("Com").innerHTML=ga[i][1];
}
function setP() {
if (moveon){
ary();
for (j=0;j<n;j++) {$(j).className="";}
$(i).className="act";
i++; if(i>=n){i=0} timer=setTimeout(setP,spd);}
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=(ga[stopid][2]!="")?"<a href="+ga[stopid][2]+"><img src="+myurl+ga[stopid][0]+"></a>":"<img src="+myurl+ga[stopid][0]+">";
$("Bbox").innerHTML=pic;
$("Com").innerHTML=ga[stopid][1];
}
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>

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

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