Gaiaxでアルバムを作ろう（２）

Gaiax のページでスライド式のアルバムを作って見ましょう。
今回は自動で写真が切り替わるスライドショーを作成します。
今回もGaiax以外のサイトに画像の入ったフォルダがアップ出来る事が条件です。
FFFTPソフトかネットワークブレースによるフォルダアップを覚えてください。


スライドショーに使用する写真を入れるフォルダを作って、フォルダ名を付けておきます。
その中に、スライドショーに使う為、縦・横のサイズを揃えて編集した写真を全て保存します。

フォルダに全ての写真が保存出来たら、そのフォルダをGaiax以外のサイトにアップします。

ここでは、右のフォルダ（tanker と名前を付けた）をアップしています。
donbeyのサイト：　http://www47.tok2.com/home/donbey/　にアップしましたので、
このフォルダのアドレスは、http://www47.tok2.com/home/donbey/tanker/ に成ります。
このフォルダの中の写真は、http://www47.tok2.com/home/donbey/tanker/dc0510.jpg の
様に成ります。　
Gaiaxのページで使用する場合は、上の「tankerフォルダ」と下のソースの青い文字の部分を編集して「*******.html　」で保存したファイルをGaiax以外のホームページにアップして、そのアドレスにGaiaxの追加ページからリンクしたり、
Gaiaxのページの任意の場所にインラインフレームで表示して、スライドショーを見せます。　　　　　　　　　　　　　　　　　　　　　　　
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>＊＊＊＊＊</TITLE>

<SCRIPT TYPE="text/JavaScript">
<!--
var number = 17;
var delay = 4000;
var frame = -1;
var timeout_id = null;
var n=0;
var ie = navigator.userAgent.indexOf("MSIE ");
var verIE = 0, winIE = -1;
if(ie >= 0) {
verIE = parseFloat(navigator.userAgent.substr(ie + 5));
winIE = navigator.userAgent.indexOf("Windows");
}
var tr_num = Math.floor(Math.random()*23);
var tm_set = 0;
var filename = new Array("dc0510.jpg",
"dc0511.jpg","dc0512.jpg","dc0513.jpg",
"dc0514.jpg","dc0515.jpg","dc0516.jpg",
"dc0523.jpg","dc0524.jpg","dc0525.jpg",
"dc0526.jpg","dc0527.jpg","dc0528.jpg",
"dc0529.jpg","dc0530.jpg","dc0535.jpg",
"dc0536.jpg")
var images = new Array(number);
var end = Math.floor(filename.length/1)
for(var i=0; i<end; i++) {
images[i] = new Image();
images[i].src = "http://www47.tok2.com/home/donbey/tanker/" + filename[i];
}

function animate() {
var trans=0;
frame++;
if (frame>=filename.length) {
frame=0;
}
if(verIE >= 5 && winIE >= 0) {
var img=document.getElementById("slideshow");
if(img.filters) {
tr_num = Math.floor(Math.random()*23);
img.filters["revealTrans"].Transition = tr_num;
trans=img.filters["revealTrans"];
}
}
if(trans) trans.apply();
document.slideshow.src = images[frame].src;
if((end+n) < filename.length){
images[end+n]=new Image();
images[end+n].src="http://www47.tok2.com/home/donbey/tanker/" + filename[end+n];
++n;
}
if(trans) trans.play();
timeout_id = setTimeout("animate()", delay);
}

function showFrame(mode) {
if(mode==0) {
++frame;
if (frame>=filename.length) {
frame=0;
}
}
else {
--frame;
if(frame<0) {
frame=filename.length-1;
}
}
if((end+n) < frame){
images[frame]=new Image();
images[frame].src="http://www47.tok2.com/home/donbey/tanker/" + filename[frame];
}
else {
if((end+n) < filename.length){
images[end+n]=new Image();
images[end+n].src="http://www47.tok2.com/home/donbey/tanker/" + filename[end+n];
++n;
}
}
document.slideshow.src = images[frame].src;
first = 0;
}
//-->
</SCRIPT>

<STYLE type="text/css">
<!--
H1.TITLE {
font-size : 22 pt;
font-family : "AR勘亭流H";
color : #0000FF;
}

IMG#slideshow {
filter: revealTrans(Duration=2.0, Transition=23);
}
-->
</STYLE>


</HEAD>
<BODY BGCOLOR="#FFFFcc" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000" onLoad="animate();">
<CENTER>
<H1 class="TITLE">汐見埠頭のタンカー</H1>
<IMG NAME="slideshow" ID="slideshow" SRC="http://www47.tok2.com/home/donbey/tanker/dc0510.jpg" BORDER="0">
<FORM>
<INPUT TYPE=button VALUE="自動" onClick="if (timeout_id == null) animate()">
<INPUT TYPE=button VALUE="停止" onClick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null;">
<INPUT TYPE=button VALUE="前へ" onClick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null; showFrame(1);">
<INPUT TYPE=button VALUE="次へ" onClick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null; showFrame(0);">
</FORM>
</CENTER>
</HTML>
</BODY>