>オートスクロールパノラマギャラリー JAVAスクリプト公開

　スライドショー用
　JAVAスクリプト公開

　スクリプト説明

目次
特徴・ご利用方法
利用手順　［基本編］
　　　手順　［応用編］
定義ファイル作成ツール

以下は参考まで　正式掲載前のため　前のページとは内容が繋がっていません。

　　　8.2.3.　画像、説明文の定義

　1)　auto_slide01.htm　の最初にある下記赤文字部分を変更します。

①　画像データ定義
Dat = new Array(200,4) // 画像ファイル名の設定
Dat[0,0] = ['[0]ファイル名','[1]説明文','[2]時間','[3]変化禁止'];

Dat[0,1] = ['test1.jpg','テスト画像　No.1の画像です','','']

－－－－－－－－－－－－－－－－－

５　処理と構成の概要

　１）　HTML文内にJAVAスクリプト（処理のためのプログラム）と、画像データ・説明文等の定義、動作の定義を書き込みます。

　　　*　auto_slide.js　ファイルは　JAVAスクリプト外部ファイル　と言い、将来の機能アップ、バグフィクス等の場合、このファイルを差し替えることで可能になるようにしました。（HTMLファイルの修正が必要な場合もあり得ますが）

８　利用法

　８．１　手順概要

　　８．２　基本編
　　　　　　ここまでで基本的な使い方ができます。
　　　8.2.1.　準備とページイメージのカスタマイズ　：　必要なファイルや表示する画像の準備
　　　8.2.2.　画像と編集するファイルの準備
　　　8.2.3.　画像、説明文の定義　　　：　画像のファイル名・説明文の定義をします。
　　　　　　ここまでで、このページで表示するサンプル例の形で貴方の画像を表示できます。
　　　8.2.4.　基本的な定義　　：　スライドショーの実行形式を簡単な定義でカスタマイズできます。

　　８．３　スライドショー実行用HTML と　JAVAスクリプト外部ファイル内容
　　　　　　この２つのファイル内のデータ、定義で動作します。　特に応用編ではどの部分に記述されているかを素早く知るために全内容と、変更する部分に記号と項目名称を掲載していますので参考にして下さい。

　　８．４　応用編
　　　　　　更に細かい設定や応用のための情報があります。
　　　8.4.1.　更なるカスタマイズ定義　：　細かくカスタマイズするための説明です。
　　　8.4.2.　呼び出し画像番号指定

　　８．４　変更例
　　　　　　基本編、応用編の設定を利用し実現できるスライドショーの例と方法です。

　　更に９項に、設定等をして動作しなかったり、簡単な原理等の質問を集めて FAQ：良くある質問と回答　として掲載します。　お問い合わせや気づいたことで共通事項を追加していきます。

　８．２　基本編

　　8.2.1.　準備とページイメージのカスタマイズ　

　１）　必要なファイルと参考例の入った下記圧縮ファイルをダウンロードして下さい。
　　　 slideshow.exe
　　　　ダウンロードするには上のアイコンを右クリックし適当なフォルダに保存して下さい。

　２）　ダウンロードした slideshow.exeを実行　（保存先のファイルをダブルクリック）すると、自動的にデータが解凍されます。

　３）　解凍されたファイルは　５　－　２）　の構造で必要なファイルが全て各フォルダに入っています。
　　　　slide01　フォルダの auto_slide01.htm を実行してみて下さい。　テスト画像のスライドショーを開始します。
　　　　この説明のサンプル表示のものですこれをベースに追加修正し、目的のスライドショーを作ると便利です。

　４）　２つのフォルダ　images と　slide01 を貴方のホームページの目的の位置にコピーまたは移動し、slide01 フォルダ内の autoslide01.htm を編集します。
　　　　最終的にはこのフォルダのサンプル画像　test1(s)～3(s).jpg、bird1(s)～3(s).jpg の12の画像ファイルは不要ですので削除して下さい。

　５）　ページのイメージ、背景、タイトル、画像の枠、それらの配置等貴方のお好みで編集して下さい。
　　　　ボタン等も差し替えていただいても構いません。　但しリンクバナー　は　見える位置のどこでも結構ですので配置しておいて下さい。またリンクタグも変更しないで下さい。
　　　　スライドショーの機能を貴方の画像で試してみたい場合は、この項目は後で編集していただいても構いません。

　６）　いよいよスライドショーの本体部分に係わる定義、設定です。その部分をまとめて次ページに掲載します。

　　　8.2.3.　画像、説明文の定義

　1)　auto_slide01.htm　の最初にある下記赤文字部分を変更します。

①　画像データ定義
Dat = new Array(200,4) // 画像ファイル名の設定
Dat[0,0] = ['[0]ファイル名','[1]説明文','[2]時間','[3]変化禁止'];

Dat[0,1] = ['test1.jpg','テスト画像　No.1の画像です','','']
Dat[0,2] = ['test2.jpg','テスト画像　No.2','','']
Dat[0,3] = ['test3.jpg','テスト画像　No.3','','']
Dat[0,4] = ['bird1.jpg','テスト画像　No.4','1000','']
Dat[0,5] = ['bird2.jpg','テスト画像　No.5','1000','']
Dat[0,6] = ['bird3.jpg','テスト画像　No.6','1000','']
Dat[0,7] = ['bird1.jpg','テスト画像　No.4','500','1']
Dat[0,8] = ['bird2.jpg','テスト画像　No.5','300','1']
Dat[0,9] = ['bird3.jpg','テスト画像　No.6','300','1']
Dat[0,10] = ['bird1.jpg','テスト画像　No.4','800','1']
Dat[0,11] = ['bird2.jpg','テスト画像　No.5','300','1']
Dat[0,12] = ['bird3.jpg','テスト画像　No.6','300','1']
Dat[0,13] = ['bird1.jpg','テスト画像　No.4','2000','1']

　2)　サンプルでは１３枚の表示をしているので定義データは Dat［０，０］から Dat［０，１３］まであります。

　3)　１枚目の画像を例に定義すると
　Dat[0,1] =　［　］の中のコンマ（　,　）で区切られた右側の番号が画像番号に対応します。左は常に０です。

　['test1.jpg','テスト画像　No.1の画像です','','']　［　　］の中に４つのデータが格納されています。
　各データは　半角の　’（アポストロフィー）２つ　''　で囲まれ、半角コンマ　,　で区切られています。

　　・最初の　　'test1.jpg'　は　画像ファイル名です。
　　・２番目の　'テスト画像　No.1の画像です'　が画像毎に表示される説明文の中身です。
　　　この中にはHTMLタグを記入することが出来ます。（詳細はFAQ）
　　・３番目の '' 内には次の画像を表示するまでの時間を入力します。
　　　何も記入しないと初期値の３秒になります。　初期値の場合も　''　は必要です。
　　　時間を設定するには千分の１秒（１ｍｓ）単位で数値を入力します。
　　　例えば５秒にする場合は　'5000' とします。
　　・４番目の　''　内は画像切り替え時のトランジション効果（サンプルでは円形の窓拡大切替え）禁止の指定です。
　　効果の禁止をする場合 '1'　とします。効果を活かす場合は何も入力しない '' とします。
　　サンプルでは　表示のNo.7～13まで禁止し切り替え時間を短くし、鳥の首を振っているような表示をしています。

　*　いずれも　' と , が一つでも誤りがあると表示できなくなりますので気を付けて下さい。

　4)　Dat［０，０］は変更しないで下さい。

　5)　表示する枚数が１３枚未満の場合は枚数以上の定義行を消去します。
　　例えば６枚の表示を行う場合は
Dat[0,7] = ['bird1.jpg','テスト画像　No.4','500','1']
・・・・・・・
Dat[0,13] = ['bird1.jpg','テスト画像　No.4','2000','1']　　を削除します。

　　　8.2.4.　基本的な定義
　　　　　　　スライドショーの実行形式を簡単な定義でカスタマイズできます。

　　［　次ページ　］　－－－－－－－

　　８．３　スライドショー実行用HTML と　JAVAスクリプト外部ファイル内容

　　　以下HTMLファイル　auto_slide01.htm と　外部スクリプトファイル　auto_slide.js　のソース（茶色文字）です。
　　赤文字の所を目的に従って編集して下さい。その下の行に設定方法の番号と項目を青文字で記載します。
　　ホームページ編集ソフトでカスタマイズする項目は　［HP］と項目のみの表示をします。

-------------------------------
HTMLファイル　auto_slide01.htm
　このソースを編集するには、ホームページ作成ソフト *　またはテキストエディタ *　を使用します。

* ホームページ作成ソフトの例　；　フロントページ、ホームページビルダー等
* テキストエディタの例　　　　　；　Windows付属のメモ帳　（　［スタート］［プログラム］［アクセサリ］［メモ帳］で開く　）
-------------------------------

<HTML><HEAD>
<TITLE>Slideshow</TITLE>
　　　　　［HP］　ページタイトル

<SCRIPT language=JavaScript>
</SCRIPT>
</HEAD>
<BODY background="../images/flower01.jpg" onload="'init()'">
　　　　　［HP］　背景
<p align="left"><b><font face="ＭＳＰ明朝" color="#FF0000">スライドショー</font></b>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　［HP］　画面のタイトル表示
<BR>
<CENTER>
<div align="center">
<table border="6" bordercolorlight="#008000" bordercolordark="#008080" bgcolor="#FFFFE1" cellspacing="3" cellpadding="3">
［HP］　画像枠
<tr><td valign="middle" colspan="0" nowrap bgcolor="#FFFFCC">
<IMG name=myImg style="FILTER: revealTrans(Duration=0.6,Transition=3)" onload="'Next_F()'">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　⑧　画像変化時の設定
</td>
</tr>
</table>
</div>
<font color="#008080" size="3"><DIV id="img_comment"></div></font>
⑨　説明文　文字の色・サイズ
<BR>
<table border="0" width="770">
<tr>
<td width="454"><font color="#008080" size="2">
<a href="http://www.my-panorama.com/"><img border="0" src="../images/presentedby.gif" width="68" height="15"></a><br>
⑩　リンクバナー　（　この部分の内容は変更しないで下さい　）
　このページは表示にJAVAを使用しています</font></td>
<td width="101"><font color="#000080" size="1">画像切替時間<br>
早<input onclick="Spd(0.6)" type="radio" value="1" name="R1">
中<input onclick="Spd(1)" type="radio" CHECKED value="2"　name="R1">
遅<input onclick="Spd(1.8)" type="radio" value="3" name="R1"></font></td>
⑪　送り速度係数
<td width="59"><font color="#008080">
<input style="FONT-WEIGHT: bold; COLOR: #ffff00; FONT-FAMILY: ＭＳＰ明朝" onclick="history.go(-1)" type="button" value=" 戻る "></font></td>
［HP］　戻りボタン
<td width="130">
<B>
<font size="1" color="#008080">
送り:</font></B>
　
<IMG name=revImg onclick="DirN()">
<IMG name=hltImg onclick="Spd0()">
<IMG name=fowImg onclick="DirP()"><br>
⑫　コントロールボタン（自動）
<font size="1" color="#008080"><B>コマ送:</B></font> <img border="0" src="../images/pb_r_end.gif" width="22" height="18"
onclick="SingN()">　<img border="0" src="../images/pb_f_end.gif" width="22" height="18" onclick="SingP()">
⑬　コントロールボタン（コマ送り）
</td>
</tr>
</table>
</CENTER>
</BODY>
</HTML>

-------------------------------
外部スクリプトファイル　auto_slide.js
　このソースを編集するにはテキストエディタを使用します。
-------------------------------

//　処理用変数
var s=1; //　　　送り時間計数
var singF =0; // Singleフラグ
var dsp=1; //　　　表示状態
var tr = 0; //　　　トランジェント禁止フラグ
var tr_effect = 1; //　トランジェント状態
var strURL //　　　取得URL
var Qn=0; //　　　指定画像番号検出位置

/*　方向表示ボタン定義　*/
revImage = new Array("../images/pb_rev.gif","../images/pb_rev_f.gif");
hltImage = new Array("../images/pb_halt.gif","../images/pb_halt_f.gif");
fowImage = new Array("../images/pb_fow.gif","../images/pb_fow_f.gif");
⑭　方向表示ボタン定義

function init(){
strURL = location.href
Qn = strURL.indexOf("?");
if(Qn>=0){Num =strURL.substring(Qn+1,Qn+10)
startF = 0;
disp()
Next_P2()
}else{
disp()
Next_P()}
}
　
function Spd0(){
if(startF==0){startF=1;if(Dir==0){dsp=1}else{dsp=-1}}else{startF=0;dsp=0}
disp();
}

function Spd(s){ delayK = s}
function DirP(){ Dir = 0;
startF =1;
dsp=1;
disp();
}

function DirN(){ Dir = 1;
startF =1;
dsp=-1;
disp();
}

function SingP(){ Dir = 0;
singF =1;
startF=1;
dsp=0;
disp();
}

function SingN(){ Dir = 1;
singF =1;
startF=1;
dsp=0;
disp();
}
　
function Next_P(){
if(Dir == 0){
if (Num++ >= Imagemax-1){Num = 1;
if(CycleEndF == 1){history.go(-1)}
};
}else{
if (Num-- <= 1){Num = Imagemax-1;if(CycleEndF == 1){history.go(-1)}};}
Next_P2();
}

function Next_P2(){
if(Dat[Num][3] == 1){tr_effect = 1} else {tr_effect = 0};
if ( tr_effect == 0){document.myImg.filters.revealTrans.Apply();}
document.myImg.src = Dat[Num][0];
if ( tr_effect == 0){document.myImg.filters.revealTrans.Play();}
img_comment.innerHTML="<BR>　　　　No."+Num+"　　"+Dat[Num][1]
if(singF == 1){startF = 0;singF = 0}
}

function Next_F(){
if(Dat[Num][2] != ""){delay = Dat[Num][2] * delayK} else {delay = delayD * delayK};
Next_T();
}

function Next_T(){
if(singF == 1){singF = 0;startF =0;Next_P();return}
if(startF == 0){delay = 0;setTimeout("Next_T()",100);return}
status = Num+" "+delay+" "+delayD+" "+delayK;
delay = delay - 100
if(delay <= 0){Next_P();} else {setTimeout("Next_T()",100);}
}

function disp(){
if((startF == 0)||(singF == 1)){
document.revImg.src = revImage[0];
document.hltImg.src = hltImage[1];
document.fowImg.src = fowImage[0];
}else{if(Dir == 0){
document.revImg.src = revImage[0];
document.hltImg.src = hltImage[0];
document.fowImg.src = fowImage[1];
}else{
document.revImg.src = revImage[1];
document.hltImg.src = hltImage[0];
document.fowImg.src = fowImage[0];
⑮　コントロールボタン（自動）表示制御
}
}
}

　　［　次ページ　］　－－－－－－－

　　８．４　応用編
　　　　　　更に細かい設定や応用のための情報があります。
　　　8.4.1.　更なるカスタマイズ定義　：　細かくカスタマイズするための説明です。
　　　8.4.2.　呼び出し画像番号指定

　　８．４　変更例
　　　　　　基本編、応用編の設定を利用し実現できるスライドショーの例と方法です。

　　［　次ページ　］　－－－－－－－

９　ＦＡＱ　良くある質問

・Q　画像が表示されません。
　A　データ定義等が正しいかどうか下記の点をチェックして下さい。
　　　・画像データ定義で　''　や　,　が抜けたり余分に記入されていませんか。
　　　・実際のファイル名と画像データ定義の入力が合っていますか。
　　　・画像ファイルが　HTMLファイルと同じフォルダに保存されていますか。
　　　・変更した部分が正しくできていますか。　変更すべきでない記号などが抜けたり追加されていませんか。

・Q　説明文の中で使うHTMLタグとは

　＊　当サイトではこれ以上の機能として先行ダウンロード、フェードイン・アウト効果を使用したページがありますが、スクリプトの複雑さ・使用命令によるバージョン等の問題の可能性が大きいことから公開は差し控えています。