slideshowJS manual

スライドショーが1つの場合

  slideshowjs.html
  slideshowjs.js
  comment.js
  slideshowjs.css
  parts(フォルダ)
  image(フォルダ)

スライドショーが複数の場合

slideshowjs.html内のスライドショーパーツ画像、slideshowjs.js、slideshowjs.css、partsフォルダへのリンクを以下のディレクトリに合わせたものに変更する。
具体的には「slideshowjs.html：スライドショー本体」の変更個所説明や、sampleフォルダ内に以下の構成例で作成したポップアップウィンドウで表示されるサンプルがあるので、参考にしてください。

  index.html(新規にslideshowjs.htmlへのリンクしたファイルを作成)
  slideshowjs.js
  slideshowjs.css
  parts(フォルダ)
    |
    |
    +-- album1(フォルダ) / slideshowjs.html
    |                      comment.js
    |                      image(フォルダ)
    |
    +-- album2(フォルダ) / slideshowjs.html
                           comment.js
                           image(フォルダ)

ファイル形式はjpegのみ。

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

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

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

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

スライドショーを一つだけ作成する場合、10行目以外は変更する部分はありません。

10行目：ブラウザのタイトルバーに表示されるタイトル

<title>slideshowJS v3.0</title>

お好きなように変更してください。

以下は複数のスライドショーを作成する場合の変更個所。
10行目の変更に加え、構成が「ファイルの構成例>スライドショーが複数の場合」と同じ場合は赤字部分の頭に../を付ける。

9行目：slideshow.cssへのリンク部

<link rel="stylesheet" type="text/css" href="slideshowjs.css" media="screen,print" />

16行目：スライドショー上部コーナー画像へのリンク部

<img src="parts/bg-slide-top.gif" width="808" height="20" alt="" />

25〜28行目：スライドショーボタン画像へのリンク部

<ul>
  <li><img src="parts/prv1.gif" ... /></li>
  <li><img src="parts/start1.gif" ... /></li>
  <li><img src="parts/stop1.gif" ... /></li>
  <li><img src="parts/nxt1.gif" ... /></li>
</ul>

78,79行目：スライド用初期画像とローディング画像へのリンク部

<img id="slideImg" src="parts/slideimage.gif" alt="" />
<img id="loader" src="parts/loader.gif" width="32" height="32" alt="" />

93行目：スライドショー下部コーナー画像へのリンク部

<img src="parts/bg-slide-bottom.gif" width="808" height="20" alt="" />

98行目：スクリプトへのリンク部

<script type="text/javascript" src="slideshowjs.js" charset="UTF-8">

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

7行目：画像切替え時間初期値設定

var delay = 3000;

1で1/1000秒（3000は3秒）
これを変えた場合「slideshowjs.html」の

<option value="3000" selected="selected">3秒</option>

のselected="selected"を上で指定した秒数の部分に移動させる必要がある。

11行目：フェード設定

var fade = true;

true:オン、false：オフ

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

var speed = 33;

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

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

var change = 15;

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

17行目：スライド部品画像のディレクトリ

var partsDir = "parts/";

slideshowjs.htmlからみたディレクトリのパスを記述

comment.js：スライドショー個別設定

複数のスライドショーを作成する場合、スライドショー毎にこのファイルを作成し設定する。(ファイルの構成例>スライドショーが複数の場合参照)

6行目：スライドショータイトル

var slideTitle = "album1";

8行目：画像ファイルの場所

var imageDir = "image/";

12行目：画像ファイル数

var totalno = 15;

17行目〜：画像のコメント

COMS[0] = "コメント1<br />コメント1";
COMS[1] = "コメント2";
|
|
COMS[14] = "コメント15";

""間のみ変更してください。
改行したい場合は、その部分に「<br />」を入れてください。

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

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

Netscape7.1(win,mac供に)でフェードをオフにすると、画像センタリング前に画像が表示されてしまい、その後すぐに画像がセンタリングされる。
Netscapeはユーザーが少ないのと、ブラウザの開発が終了し、2008年2月1日でサポートが停止するので、今後対策予定はないです。

slideshowJS manual

概要

ファイル構成

ファイルの構成例