右上のサムネイル
(小さな画像)を
クリックすると、
大きな画像と
右下にコメントが
出ます。

スライドショー２５■面白２■　サムネイル・フェード　　　　UP日時 : 2014/07/06

サムネイルのスライドショーにフェードを付けてみました。
画像がゆっくりと切り替わります。
そしてできるだけ、拡大画像を大きくしてみました。高さ(height)指定が100%です。

横(width)指定100%の方が大きな画像にできますが、画像全部を見るにはスクロールが必要になります。
その方がよければ、変更して下さい。

そしてサムネイル画像は、拡大画像を邪魔しないように、不透明度を付けています。
クリックした時だけ不透明度100%(元の表示)になります。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!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">
<!--
*{ margin:0px; padding:0px;}/*★画面ピッタリに表示するため隙間を消す*/
body{
background-image:url(frc6.gif);/*★背景画像指定*/
background-color:#8d8477;
}

#Ga{
position:absolute; top:0px; left:0px; /*★拡大画像の左端上端指定*/ 
width:auto;
height:100%; /*★拡大画像の縦幅のみ100%指定で揃える。好みで変更*/
z-index:-1; /*★拡大画像の上にサムネイル画像を載せるため、画像の重なりをマイナス指定*/
box-shadow: 5px 5px 10px  #333333; /*★影付き*/
}
p.m_size{position:absolute; top:0px; right:0px;}/*★サムネイル画像の表示位置指定。右上端*/
p.m_size img{
width:auto; 
height:70px;  /*★サムネイル画像指定。縦幅のみ数値指定。好みで変更*/ 
border: solid 1px #ffffff;/*★画像枠指定。太さと色*/
border-radius: 10px;/*★角丸指定*/
opacity:0.6;/*★サムネイル画像を60%の不透明度にする*/
}

p.m_size img:hover{opacity:1.0;}/*★サムネイル画像にマウスオンした時は不透明度100%*/

/*★コメント不要なら以下は削除*/
#Me{
position:absolute; bottom:0px; right:0px; 
color:#ffffff; /*★コメント文字の色*/
padding:5px;
background-color: rgba(0,0,0,0.5);/*★背景透過指定。0は完全透過。1は完全不透過。50%不透過指定*/
}
-->
</style>
<!--★ここまでコピー。別に、bodyの中にもコピーがあります-->

</head>
<body>

<p style="position:absolute;top:150px;right:20px;background-color:#eeeeee; width:10%;padding:10px;border-radius: 10px;">右上のサムネイル<br>(小さな画像)を<br>クリックすると、<br>大きな画像と<br>右下にコメントが<br>出ます。</p>


<!--★ここからコピー-->

<!--★サムネイル(小さな画像)指定。拡大画像と同じものをCSSでサイズを縮小して表示してますが、別に縮小画像を作成してその画像を指定しても可能。今回は、サムネイルには透明度がついています。クリック時は、透明度が消えます-->
<p class="m_size">
<a href="javascript:Show(0);"><img src="gat14.jpg"></a>
<a href="javascript:Show(1);"><img src="gat15.jpg"></a>
<a href="javascript:Show(2);"><img src="gat16.jpg"></a>
<a href="javascript:Show(3);"><img src="gat17.jpg"></a>
<a href="javascript:Show(4);"><img src="gat18.jpg"></a>
<a href="javascript:Show(5);"><img src="ten3.jpg"></a>
</p>

<!--★サムネイル画像を増やす時は、Show(6)というふうに、()の数字を増やしてここに続けて記述して下さい。下の拡大画像もコメントも増やします-->

<!--★拡大画像位置。最初の画像とid="Ga"を記述-->
<img src="gat14.jpg" id="Ga">

<!--★コメント位置。最初のコメントとid="Me"を記述-->
<p id="Me" width="300">嵐の中の海の船 by イヴァン・アイヴァゾフスキー</p>

<script type="text/javascript">
<!--
/*★クリックでフェードのサムネイル・スライドショー。コメ付き*/

ga=new Array();/*★拡大用画像指定*/
ga[0]='gat14.jpg';
ga[1]='gat15.jpg';
ga[2]='gat16.jpg';
ga[3]='gat17.jpg';
ga[4]='gat18.jpg';
ga[5]='ten3.jpg';

var url=""; /*★画像パス。画像が他のフォルダーに入っている時*/

mes=new Array();   /*★コメント指定。コメントが不要なら削除*/
mes[0]="嵐の中の海の船 by イヴァン・アイヴァゾフスキー";
mes[1]="蛇つかい by ジャン=レオン・ジェローム";
mes[2]="眠るジプシー女 by アンリ・ルソー";
mes[3]="仮面舞踏会後の決闘 by ジャン=レオン・ジェローム";
mes[4]="虎 by ジャン=レオン・ジェローム";
mes[5]="ヒュラスとニンフ by ジョン・ウィリアム・ウォーターハウス";

var henka = 50    /*★フェードの変化時間。原本80。 値が大きいほどゆっくり*/
var tid1;
var opacnt=10;　/*★透明度の増減の間隔。原本10。数値が小さいほど遅い*/

/*スライド部分*/

function Show(i){
   document.getElementById("Ga").src=url+ga[i];
   document.getElementById("Me").innerHTML=mes[i];/*★コメント不要ならこの１行は削除*/
  fdi();
}

/*フェード部分主体*/

function fdi() {
var img = document.getElementById("Ga");
img.style.visibility = "visible";
fadeIn("Ga", 0);
}

function fadeIn(imgId, opacity) {
if (opacity <= 100) {
setOpacity(document.getElementById(imgId), opacity);
opacity += opacnt;
tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", henka);  
} else {
window.clearTimeout(tid1);
}
}
function setOpacity(img, opacity) {
img.style.filter = "alpha(opacity:" + opacity + ")";/*★2行削除*/
img.style.opacity = opacity / 100;
}

// -->
</script>
<!--★ここまでコピー-->


<div style="position:absolute; top:110%;left:0px;width:100%;">

<div align="center">
<br><br><br>
<p style="background-color:#eeeeee;width:80%; ;padding:20px;border-radius:10px;text-align:left;">サムネイルのスライドショーにフェードを付けてみました。<br>
画像がゆっくりと切り替わります。<br>
そしてできるだけ、拡大画像を大きくしてみました。高さ(height)指定が100%です。<br>
<br>
横(width)指定100%の方が大きな画像にできますが、画像全部を見るにはスクロールが必要になります。<br>
その方がよければ、変更して下さい。<br>
<br>
そしてサムネイル画像は、拡大画像を邪魔しないように、不透明度を付けています。<br>
クリックした時だけ不透明度100%(元の表示)になります。<br>
</p>
<br><br><br>

</div>
</div>
<br><br><br><br>
</body>
</html>

スライドショー２５■面白２■ サムネイル・フェード UP日時 : 2014/07/06

スライドショー２５■面白２■　サムネイル・フェード　　　　UP日時 : 2014/07/06