slideshowJSm 説明

必要な数だけalbumフォルダを増やしていく（albumフォルダ名は任意）。

  slideshowjsm.html
  slideshowjsm.js
  slideshowjsm.css
  parts(フォルダ)
  album1(フォルダ) / slidedata.txt
                     image(フォルダ)
  album2(フォルダ) / slidedata.txt
                     image(フォルダ)

ファイル形式はjpegのみ。

imageフォルダに以下のファイル名を付けた画像を入れる。
フォルダ名を変更した場合は、slideshowjsm.jsの「imageFolder」を設定する項目も変更してください。

小さい数字から順に表示されていきます。
使用できる画像の数は2桁までを想定しています。99枚、100枚以上になると動作に問題が出てくるかもしれません。

01.jpg、02.jpg、03.jpg ...

※本スライドショーはサーバーと通信を行なって（Ajax）、slidedata.txtのデータを受信していますので、設置テストはサーバーに設置して行なって下さい。
ローカル環境ではスライドショーは動きませんのでご注意下さい。

slideshowjsm.html：スライドショー本体

slideshowjsm.htmlのデザインはアレンジしやすいようにシンプルなものにしています。
以下で説明する内容を守りお好きなようにデザインしていってください。

基本的に以下のコメントに挟まれている部分を変更してください。

<!-- ↓通常表示される部分↓ -->
<!-- ↑通常表示される部分↑ -->

スライドショーは2種類の方法で開始できるようにしています。

セレクトメニューでスライドショーを選択する(「セレクトメニューでスライドショー」で囲まれている部分)

<!-- ↓セレクトメニューでスライドショー↓ -->
<!-- ↑セレクトメニューでスライドショー↑ -->

リンクをクリックしてスライドショーを開始する(「リンククリックでスライドショー」で囲まれている部分)

<!-- ↓リンククリックでスライドショー↓-->
<!-- ↑リンククリックでスライドショー↑-->

好みの方を選択し、不要な方を削除してください。

セレクトメニューでスライドショーで変更および注意する個所

• 青地の部分はスライドショーに必要な部分ですので変更や削除はしないでください。
• 赤字の部分が変更可能な個所。
• 緑字の部分は各スライドショーの画像とslidedata.txtが入っているフォルダ名に変更してください。
• ピンク字の部分は区切りになっています。disabled="disabled"の記述とセットで-文字-のパターンで記述してください。
  （Safariでこの部分が選択できてしまうので、選んでしまった場合の対策です。）
  区切りが必要ない方はこの行まるまる削除して構いません。

<form id="formgly" action="#">
<p>
<select id="selectgly" onchange="getFolderName()">
<option selected="selected" value="csm">スライドショーを選択して下さい</option>
<option disabled="disabled">---- 2008 ----</option>
<option value="album2">バラギ湖キャンプツーリング</option>
<option disabled="disabled">---- 2007 ----</option>
<option value="album1">Cycle:ya!キャンプツーリング</option>
</select>
<input type="reset" value="reset" />
</p>
</form>

リンククリックでスライドショーで変更および注意する個所

• 青地の部分はスライドショーに必要な部分ですので変更や削除はしないでください。
• 緑字の部分は各スライドショーの画像とslidedata.txtが入っているフォルダ名に変更してください。

onclick="getFolderName('アルバムフォルダ名')"がスライドショー開始の処理になりますので、今回のサンプルのようにaタグ内に記述せずに、pやdivまたはspanなどにも記述できます。

その他は変更してもスライドショーには影響はありませんので、ご自由にデザインしてください。

<div id="listbox">
<div class="albumbox">
<h3><a href="#" onclick="getFolderName('album2')">バラギ湖キャンプツーリング</a></h3>
<p>2008/1/1-3<br />当日は晴天でキャンプツーリング日和</p>
</div>

<div class="albumbox">
<h3><a href="#" onclick="getFolderName('album1')">Cycle:ya!キャンプツーリング</a></h3>
<p>2007/7/29-30<br />伊豆にあるインディアンの住居TIPIへ</p>
</div>
</div>

slideshowjsm.js：スライドショー基本設定

7行目：フェード設定

var fade = true;

true:オン、false：オフ

8行目：フェードスピード設定

var speed = 33;

この値を大きくするとフェードが遅くなる。
spd/1000秒毎にフェードステップ量(change)だけ変化させる。

9行目：フェードステップ量設定

var change = 15;

この値を大きくするとフェードが粗くなる。

11行目：フェードステップ量設定

var imageFolder = "image";

スライドショー用画像を入れているフォルダ名

slidedata.txt：スライドショーコメント設定

赤字の部分を好きなように変更してください。
::::はスライドショータイトルとコメントの区切り文字、<>は各コメントの区切り文字となっています。

スライドショータイトル::::コメント1<>コメント2<>コメント3<>コメント4<>コメント5

IE6、Firefox2.0.0.12、Netscape7.1、Opera9.25

Safari1.3.2、Firefox2.0.0.12、Netscape7.1、Opera9.25、Camino1.5.4

画像周りのボーダーやカーソルの位置を示すprev,next画像の上にマウスを持ってくると、カーソルの位置を示すprev,next画像が消える。