slideshowJSs 説明

概要

ファイル構成

  1. index.html
  2. slideparts(フォルダ)
  3. album1
  4. album2
  5. manual.html

ファイルの構成例

ダウンロードしたファイル構成のまま、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 />」を入れてください。

動作確認

下記ブラウザ以外での動作は未確認ですが、あまり古いブラウザでなければ動くと思います。

確認出来ている問題

更新履歴