サムネイル７■背景サムネ自動スライドtitle付

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

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

サムネイル画像がimgのJavaScriptはこちら　→　サムネイル６■同一画像自動スライドtitle付

上記のJavaScriptを改造しました。
自動スライドショーのJavaScriptで、サムネイル画像マウスオンでスライドショーが停止し、サムネイル画像マウスアウトで、サムネイル画像と同じ画像からスライドショーが再開するのは、改造元と同じです。
注意書きや原本についての詳細は、改造元を参照して下さい。

改造元と違う点は、サムネイル画像の作成方法です。
小さなサムネイル画像も拡大画像も同じ画像を使用しているので、あまり重い画像には向かないのは、改造元と同じです。
ただし、サムネイル画像は縮小画像ではありません。
拡大画像と同じ大きさのまま背景画像にして、その中央部分だけを切り取って、サムネイル表示をしています。
この操作はJavaScriptの中で行っています。
そのためCSSでの装飾が、改造元の「#Mbox img」ではなく、「#Mbox div」に変更になっています。
「#Mbox」というサムネイルの全体領域の中に、「小さなimg」を並べるのではなく「小さなdiv」を並べているのです。
この方法は、サムネイル用に別に画像を作ったかのような、面白い効果が出ます。

フェードイン・アウト切替のJavaScriptはこちら　→　サムネイル７Ｆ■フェード背景サムネ同一画像自動スライドtitle付

<!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付</title>

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

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

#waku td{vertical-align:top;}/*★サムネイルと拡大画像の上端を揃える為*/

#Bga{
width:370px;/*★必須。拡大画像の横幅*/
height:245px;/*★必須。拡大画像の縦幅*/
border:solid 8px #eda;/*★枠線指定。薄茶色*/
outline:solid 1px #000;/*★外枠線指定。黒色*/
}

#Mbox{width:220px;}/*★サムネイル全体領域。サムネイルが横に2個並ぶように大きめに横幅指定*/

#Mbox div{
margin-right:10px;/*★サムネイル1個同士の横の余白*/
margin-bottom:3px;/*★サムネイル1個同士の下の余白*/
width:80px;/*★サムネイル1個の表示横幅指定。お好みで*/
height:53px;/*★サムネイル1個の表示縦幅指定。お好みで*/
border:solid 3px #aaa;/*★サムネイル1個の枠線指定　灰色*/
opacity:0.6;/*★サムネイル1個の透過度指定 60%*/
display:inline-block;/*★サムネイルを横並びさせる為の指定。指定しないと1個の縦並びになる*/
}

/*★★★必須。後ろにclass指定の「.act」を必ず付ける。サムネイル変化用の指定。変化自体は枠線でも透過度でも角丸でも可*/
#Mbox div.act{ opacity:1; border:solid 3px #000;}/*★透過度完全不透明の100%。枠線指定黒色。お好みで*/

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

</head>
<body>

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

<!--★ここからコピー-->
<!--■「tableのid="waku"」は画像の配置用。JavaScriptとは無関係なので、不要なら削除しても可-->

<table id="waku"><tr>
<td><div id="Mbox"></div></td><!--★サムネイル指定 id="Mbox"は必須-->
<td><img src="a1.jpg" id="Bga"></td><!--★拡大画像指定。一番最初の画像を記述。 id="Bga"は必須-->
</tr></table><!--■配置用の「tableのid="waku"」の終了。不要なら削除しても可-->

<script type="text/javascript"><!--
/*=====================================================================
title付き背景サムネイル同一画像自動スライド：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）
即時関数のonclickの参考サイト：http://qiita.com/kyoshiro-obj/items/96890ffe973d3bec0547　★2016/09/03ズーム部分削除。背景サムネ
=======================================================================*/
(function (){ var n=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とtitleの同時指定。増減可能。["画像","title"];　の２個をこの順番で記述。最後の ] の前には ,(カンマ) 無し
var ga=[];
ga[n++]=["a1.jpg","紫の花　きれいです"];
ga[n++]=["a2.jpg","オレンジの花　きれいです"];
ga[n++]=["a3.jpg","ハスの花　これもきれい"];
ga[n++]=["a4.jpg","コスモスは　風にゆれてる"];
ga[n++]=["pt51r.jpg","川辺のマーガレット"];
ga[n++]=["pt37r.jpg","リナリアの花"];
ga[n++]=["pt16r.jpg","タンポポの白い綿毛"];
ga[n++]=["sf5.jpg","青い朝顔。この世界は&#13;&#10;ほんとうにきれいです"];/*■titleの改行には「&#13;&#10;」を使用*/

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

//指定ここまで--------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var i=0,j=0,stopid=0, timer;
var moveon=true;
function setP() {
if (moveon){
$("Bga").src=myurl+ga[i][0];
for (j=0;j<n;j++) {$(j).className="";}
$(i).className="act";
i++; if(i>=n){i=0} timer=setTimeout(setP,spd);}
else {clearTimeout(timer); $('Bga').src=myurl+ga[stopid][0];}
}
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();}
var sss="";
for (j=0;j<n;j++) {sss +="<div style='background:url("+myurl+ga[j][0]+") 50% 50%;' title='"+ga[j][1]+"' id='"+j+"'></div>";}//修正
$("Mbox").innerHTML=sss;
var b=$("Mbox").getElementsByTagName("div");//imgをdivへ修正
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>

サムネイル７■背景サムネ同一画像自動スライドtitle付 UP日時 : 2016/09/03

　サムネイル７■背景サムネ同一画像自動スライドtitle付　　　　UP日時 : 2016/09/03