slideshowJSs 説明

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

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

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

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

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

ファイル形式はjpegのみ。

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

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

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

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

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

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

<title>slideshowJSs v2.0</title>

ブラウザのタイトルバーに表示されるタイトルです。お好きなように変更してください。

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

36行目：ローディング画像へのリンク部

<img src="parts/loading.gif" width="32" height="32" alt="Now Loading" id="loader" />

38-40行目：スライド用初期画像とprev,next画像へのリンク

<img src="parts/prev.gif" width="15" height="50" alt="PREV" id="prev" />
<img src="parts/start2.gif" alt="" id="slideImg" />
<img src="parts/next.gif" width="15" height="50" alt="NEXT" id="next" />

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

<script type="text/javascript" src="slideshowjss.js">

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

8行目：フェード設定

var fade = true;

true:オン、false：オフ

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

var speed = 33;

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

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

var change = 15;

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

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

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

slideshowJSs 説明

概要

ファイル構成

ファイルの構成例

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

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

設置方法

画像ファイル

設定方法