複数枚の写真表示

１．概要

複数枚の写真を表示するとき、　001.html 002.html・・・のように写真の枚数分のページを作成します
しかし、この方法では写真の順番を変えたり表示方法を変更する場合そのページ数分修正しなければなりません
ここでは、　JavaScript　を使用して効率よく表示する方法を解説します

２．データ作成

データを準備します
写真は　001.jpg 、002.jpg、・・・・・ 005.jpgの５枚です
テキストエディターを使って下記のように入力し、これを　data.js というファイル名で保存します

--< 図１ >--

var p_name="写真の表示(基本)"

                  

                  //-- 掲載写真リスト

                  f_data = new Array(

                  　　"001<>写真の説明１<><>",

                  　　"002<>説明２<><>",

                  　　"003<>説明３<><>",

                  　　"004<>説明４<><>",

                  　　"005<>説明５<><>",

                  　　"<><><><>"

                  )

index.html
data.js
photo 写真を入れるフォルダー
　　　　　この中に　001.jpg ～ 005.jpg のファイルがあります

３．基本となるページの作成(index.html)

ホームページ・ビルダー等で基本となるページを作成します
下記のように
　　第１行目には「タイトル」を
　　第２行目には写真を表示、
　　第３行目には写真の説明文・写真番号を表示
　　第４行目にはクリックすると前、次の写真を表示するボタンを配置

--< 図２ >--

タイトル表示部

写真の説明部分　　　写真番号

　　前の写真

　　戻る

　　次の写真

下記のように太字の部分を追加します

--< 図３ >--

<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 は指定しないことです
これは異なった写真サイズでも原寸で表示するためです

背景色、写真の枠等は自由にデザインします

４．JavaScriptの解説

データの読み込み
図４にソースを示します。ファイル名、写真説明のための配列変数(箱)を宣言します
データは図１から
"001<>写真の説明<><>",
という形式で作成されています。それぞれの項目は<>という記号で区切られています
　　第０項目=ファイル名　　すべて　.jpg なので拡張子は省略します
　　第１項目=写真の説明
　　第２項目=予備の項目でとりあえず空白にしておきます
となります

--< 図４ >--

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を設定しているのでその位置に表示するようにします

--< 図５ >--

//-------------- 　写真・説明 表示　------------

                  

                  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;

                  }

図６は前、次のボタンをクリックしたときの切り替えです
　　photo_num　　写真番号
　　n = 1 　　　　　次の写真の場合
　　n = -1　　　　　前の写真の場合
この切り替えはループに設定してあります

--< 図６ >--

//-- 前、次の切り替え

                  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()

                  }

■　サンプルです。この解説を見ながらソースをご覧下さい

５．まとめ

いかがでしょうか
今まで写真枚数だけ　html ファイルを作成していましたが、この方法ですといとも簡単に複数枚の写真表示が可能となります
また、写真の表示順番などは図１の並び替えだけで、自由に変更することが出来ます
ただし　<><><> は最後に置きます