サムネイル１０■別画像自動スライドコメ付

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

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

拡大と縮小画像が同じ画像のJavaScriptはこちら　→　サムネイル８■同一画像自動スライドコメ付

上記のJavaScriptを改造しました。
サムネイル（小さい画像）付きの自動スライドショーのJavaScriptで、コメント付きです。
サムネイル画像をマウスオンするとスライドショーが停止し、サムネイル画像マウスアウトで、サムネイル画像と同じ画像からスライドショーが再開します。
改造元と違うのは、小さなサムネイル画像と拡大画像が、別画像である点です。

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

拡大のスライド画像表示分と同じサムネイル画像に、透過度指定（opacity=0.3）が付いて、サムネイル画像が薄くなります。
この透過度は、CSSで指定します。「#Mbox img.act」の項目で指定します。
CSSでの指定なので、枠線の色を変えたり透過度を変えたり角丸にしたり、複数指定も可能です。
今回の表示配置は「領域（ここでは#waku）を基準にして、画像やコメントを配置するAllAboutを参考にしました。

原本は「http://www.fabulant.com」の「Slideshow with thumbnail gallery and zoom-effects（by Peter Gehrig）」で、簡単な機能のみを分離して作成しました。
原本サイトは現在（2016/09/02：現在）閉鎖済みです。
後日原本も紹介する予定です。

フェードイン・アウト切替の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{
position:relative;/*★位置指定の基準*/
margin:0 auto;/*★位置指定(上下、左右）*/
width:600px;/*★横幅。拡大画像横幅を指定*/
height:400px;/*★縦幅。拡大画像縦幅を指定*/
border:solid 7px #00f;/*★枠線指定。青色*/
}

#Bga{
position:absolute;top:0;left:0;/*★拡大画像の位置指定。位置の基準は#waku。*/
width:600px;/*★必須。拡大画像の横幅*/
height:400px;/*★必須。拡大画像の縦幅*/
}

#Com{
position:absolute;/*★コメントの位置指定。位置の基準は#waku。*/
left:20px;top:10px;/*★コメントの位置。拡大画像の中の左上*/
width:300px;/*★コメントの横幅指定。お好みで*/
font-size:16px;/*★コメントの文字サイズ*/
color:#fff;/*★コメントの文字色白色*/
text-align:left;/*★コメントの左寄せ*/
text-shadow:2px 2px 2px #000;/*★文字の影指定黒色*/
}

#Mbox{
position:absolute;/*★サムネイル全体領域の位置指定。位置の基準は#waku。*/
right:0px;bottom:-10px;/*★サムネイル全体領域の位置。拡大画像の中の右下*/
width:100%;/*★サムネイル全体領域の横幅指定。#wakuの横幅と同じ指定だが、お好みで*/
height:80px;/*★サムネイル全体領域の縦幅。サムネイル1個より大きめ*/
text-align:right;/*★サムネイル画像の右寄せ*/
}

#Mbox img{
margin-right:8px;/*★サムネイル1個同士の横の余白*/
width:80px;/*★サムネイル1個の表示横幅指定。縦幅は自動になる*/
border:solid 2px #acf;/*★サムネイル1個の枠線指定　水色*/
opacity:0.8;/*★サムネイル1個の透過度指定30%*/
border-radius:50%;/*★サムネイル1個の角丸指定。50%で円形指定*/
}

/*★★★必須。後ろにclass指定の「.act」を必ず付ける。サムネイル変化用の指定。変化自体は枠線でなく、透過度でも角丸でも可*/
#Mbox img.act{opacity:0.3;}/*★透過度指定30%*/

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

</head>
<body>

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

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

//★同時指定。増減可能。['画像','サムネイル用縮小画像','コメント'];　の３個をこの順番で記述。コメントにタグも使用可
var ga=[];
ga[n++]=['pt29.jpg','pt29s.jpg','観賞用唐辛子'];
ga[n++]=['pt30.jpg','pt30s.jpg','夕日の海'];
ga[n++]=['pt31.jpg','pt31s.jpg','海の中の白クマ'];
ga[n++]=['pt32.jpg','pt32s.jpg','白い椿'];
ga[n++]=['pt42.jpg','pt42s.jpg','野生の<span style="color:red;">ウサギ</span>'];

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

//指定ここまで--------------------------------------------------------------------------
function $(id){ return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var pp=[]; for(var p=0;p<n;p++){ pp[p]=new Image(); pp[p].src=myurl+ga[p][0];}//ファイルの先読み
var i=0,j=0,stopid=0, timer;
var moveon=true;
function ary() { $("Bga").src=myurl+ga[i][0]; $("Com").innerHTML=ga[i][2];}
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() { $("Bga").src=myurl+ga[stopid][0];$("Com").innerHTML=ga[stopid][2];}
var sss="";
for (j=0;j<n;j++) {sss +="<img src="+myurl+ga[j][1]+" 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