ダウンロードしたファイル構成のまま、albumフォルダを必要な数だけ増やしてくだけです。(albumのフォルダ名は任意)
もしファイルの位置関係を変える場合は、「設定方法」を参考に、各ファイルへのリンクを適宜変更してください。
index.html(新規にslideshowjs.htmlへのリンクしたファイルを作成)
slideparts(フォルダ)
album1(フォルダ)
slideshowjss.html
comment.js
image(フォルダ)
album2(フォルダ)
slideshowjss.html
comment.js
image(フォルダ)
album3(フォルダ)
slideshowjss.html
comment.js
image(フォルダ)
・
・
・
ファイル形式はjpegのみ。
imageフォルダに以下のファイル名を付けた画像を入れる。
フォルダ名を変更した場合は、slideshowjss.jsの画像ファイルの場所を設定する項目も変更してください。
画像は小さい数字から順に表示されていきます。
使用できる画像の数は2桁までを想定しています。99枚、100枚以上になると動作に問題が出てくるかもしれません。
01.jpg、02.jpg、03.jpg ...
index.html:各アルバムへのリンクページ
これはサンプルページなので、好きなページを作成してください。
各スライドショーへのリンクは「slideshowjss.html」を設定してください。
slideshowjss.html:スライドショー本体
14行目:ブラウザのタイトルバーに表示されるタイトル
<title>slideshowJSs v3.0</title>
ブラウザのタイトルバーに表示されるタイトルです。お好きなように変更してください。
18行目:各アルバムへのリンクページへのリンク
<a href="../index.html">Home</a>
各アルバムへのリンクページへのリンク設定です。
以下はファイルの位置関係を変更した場合の、各ファイルへのリンク変更個所。
21行目:ローディング画像へのリンク部
<img src="../slideparts/images/loading.gif" width="32" height="32" alt="Now Loading" id="loader" />
27行目:スライド用初期画像とprev,next画像へのリンク
<img src="../slideparts/images/prev.gif" width="15" height="50" alt="PREV" id="prev" />
<img src="../slideparts/images/next.gif" width="15" height="50" alt="NEXT" id="next" />
33, 34行目:スクリプトへのリンク部
<script type="text/javascript" src="../slideparts/slideshowjss.js" charset="UTF-8"">
<script type="text/javascript" src="comment.js" charset="UTF-8"">
slideshowjss.js:スライドショー基本設定
7行目:画像フォルダ設定
var imageDir = "image/";
slideshow.htmlから見たフォルダの位置を設定
11行目:画像プリロード(先読み込み)設定
var preimg = true;
true:オン、false:オフ
14行目:フェード設定
var fade = true;
true:オン、false:オフ
15行目:フェードスピード設定
var speed = 33;
この値を大きくするとフェードが遅くなる。
spd/1000秒毎にフェードステップ量(change)だけ変化させる。
16行目:フェードステップ量設定
var change = 15;
この値を大きくするとフェードが粗くなる。
以下はファイルの位置関係を変更した場合の、各ファイルへのリンク変更個所。
203行目:progressbar.jsへのリンク
ele.src = "../slideparts/progressbar.js";
comment.js:スライドショー個別設定
6行目:スライドショータイトル
var slideTitle = "2007/7/29-30:Cycle:ya!キャンプツーリング";
9行目:画像ファイル数
var totalno = 5;
14行目〜:画像のコメント
COMS[0] = "コメント1<br />コメント1";
COMS[1] = "コメント2";
|
|
COMS[4] = "コメント5";
""
間のみ変更してください。
改行したい場合は、その部分に「<br />」を入れてください。