1.概要
複数枚の写真を表示するとき、 001.html  002.html・・・のように写真の枚数分のページを作成します
しかし、この方法では写真の順番を変えたり表示方法を変更する場合そのページ数分修正しなければなりません
ここでは、 JavaScript を使用して効率よく表示する方法を解説します
2.データ作成
データを準備します
写真は 001.jpg 、002.jpg、・・・・・ 005.jpgの5枚です
テキストエディターを使って下記のように入力し、これを data.js というファイル名で保存します

--< 図1 >--
var p_name="写真の表示(基本)"

//-- 掲載写真リスト
f_data = new Array(
  "001<>写真の説明1<><>",
  "002<>説明2<><>",
  "003<>説明3<><>",
  "004<>説明4<><>",
  "005<>説明5<><>",
  "<><><><>"
)

index.html
data.js
photo      写真を入れるフォルダー  
         この中に 001.jpg 〜 005.jpg のファイルがあります
3.基本となるページの作成(index.html)
ホームページ・ビルダー等で基本となるページを作成します
下記のように
  第1行目には「タイトル」を
  第2行目には写真を表示、
  第3行目には写真の説明文・写真番号を表示
  第4行目にはクリックすると前、次の写真を表示するボタンを配置

--< 図2 >--
タイトル表示部
写真の説明部分   写真番号
  前の写真   戻る   次の写真

下記のように太字の部分を追加します
--< 図3 >--
<BODY bgcolor="#cccccc">
<CENTER>
<TABLE border="0" cellpadding="3" cellspacing="0">
<TBODY>
<TR>
    <TD align="center"><B><FONT size="6" color="#000000">
    <SPAN id="title">タイトルの表示部</SPAN></FONT></B>
    </TD>
</TR>
<TR>
    <TD><IMG name="myPhoto" src="photo/001.jpg" border="0"></TD>
</TR>
<TR>
    <TD align="center"><FONT color="#000000">
    <SPAN id="setumei">写真の説明部分</SPAN> </FONT>
  <SPAN id="num">写真番号</SPAN>

    </TD>
</TR>
<TR>
    <TD align="center">
        <TABLE border="0" cellpadding="5" cellspacing="0">
        <TBODY>
        <TR>
            <TD><A href="javascript:back_next(-1)">←前</A></TD>
            <TD><A href="http://www.xxx.yyy/...">戻る</A></TD>
            <TD><A href="javascript:back_next(1)">次→</A></TD>
        </TR>
        </TBODY>
        </TABLE>
    </TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<SCRIPT type="text/javascript">
<!--
       //-- タイトル表示
       changeElementText("title", p_name)

       //-- 写真・番号・説明文等の表示
       disp()

//-->
</SCRIPT>

</BODY>
</HTML>

ここで注意することは 
<IMG name="myPhoto" src="photo/001.jpg" border="0">
の中で width  height  は指定しないことです
これは異なった写真サイズでも原寸で表示するためです

背景色、写真の枠等は自由にデザインします
4.JavaScriptの解説
データの読み込み
図4にソースを示します。ファイル名、写真説明のための配列変数(箱)を宣言します
データは図1から
"001<>写真の説明<><>",
という形式で作成されています。それぞれの項目は<>という記号で区切られています
  第0項目=ファイル名  すべて .jpg  なので拡張子は省略します
  第1項目=写真の説明
  第2項目=予備の項目でとりあえず空白にしておきます
となります
--< 図4 >--
var dat_sum = 0; //-- データ総数
var photo_num = 1; //-- 写真番号

//-- データ変換
var f_name = new Array() ;//-- ファイル名
var f_setumei = new Array();//-- 写真説明
var f_dummy = new Array() ;//-- ダミー

var j=0
for(i=0 ; i<f_data.length ; i++){
     f_dummy=f_data[i].split("<>")
     j++
     f_name[j] = f_dummy[0]
     var d_end = f_dummy[0]

     f_setumei[j]=f_dummy[1]
}
var dat_sum = j ;//-- データ数
if(d_end == ""){dat_sum = j-1}
データの表示

写真、タイトル、説明の表示です
それぞれ本体(index.html)で、idを設定しているのでその位置に表示するようにします
--< 図5 >--
//--------------  写真・説明 表示 ------------

function disp(){
     //-- 写真表示
     document.myPhoto.src = "photo/" + f_name[photo_num] + ".jpg"

     //-- 写真の説明
     changeElementText("setumei", f_setumei[photo_num]);

     //-- 写真番号の表示
     var number="["+photo_num + "/" + dat_sum + "]"
     changeElementText("num",  number)
}

//-- 写真説明文の表示
function changeElementText(id, newText) {
     element = document.getElementById(id);
     element.innerHTML = newText;
}
図6は前、次のボタンをクリックしたときの切り替えです
  photo_num   写真番号
  n = 1      次の写真の場合
  n = -1     前の写真の場合
この切り替えはループに設定してあります
--< 図6 >--
//-- 前、次の切り替え
function back_next(n){
     photo_num = photo_num + n
     if(photo_num > dat_sum){photo_num = 1}
     if(photo_num < 1){photo_num = dat_sum}
     disp()
}
■ サンプル です。この解説を見ながらソースをご覧下さい
5.まとめ
いかがでしょうか
今まで写真枚数だけ html  ファイルを作成していましたが、この方法ですといとも簡単に複数枚の写真表示が可能となります
また、写真の表示順番などは図1の並び替えだけで、自由に変更することが出来ます
ただし <><><> は最後に置きます