| １．はじめに |
スライドショウもその後いろいろと改良してきました
ここでは２００９年７月現在使用しているスライドショウを紹介します
どうぞ、ご自由にお使い下さい |
| ２．サンプル |
まず、サンプルをご覧下さい。
■ 表示サンプル_0 最初からスライドショウを表示
■ 表示サンプル_1 最初にサムネイルを表示
■ 表示サンプル_2 最初にサムネイルを表示 画像の拡大(2009/12/26 追加)
特徴
１．データ形式(data.js)は今までの形式を使用します
２．最初に掲載写真一覧を表示します
３．見たい写真のサムネイルをクリックするとスライドショウが開始されます
サムネイルにマウスを載せると写真を拡大表示します sample_2 の場合
４．右側にスクロールするリストを表示します
５．任意のサムネイルをクリックすると、拡大表示をします
６．サムネイルからマウスを離すと、スライドショウが開始されます
７．スライドショウの進行とともにサムネイルは「スムース」にスクロールする
８．「リスト非表示」でサムネイルは非表示となる
９．ウインドウサイズをは変更して、自由なサイズで写真を見ることが出来ます
ただし写真は縮小のみです
|
| ３．各種ファイルの準備 |
３．１ データファイル(data.js)の作成
データファイルはエディター等を使用して次の形式で作成します
"20080610_115902<>道路で吸水中<>1000x667<>町内<>撮影地地図<><><>@<>",
| 20080607_092140 |
写真のファイル名 拡張子(.jpg)は省略します
この形式で設定すると、写真の撮影年月日が表示されます |
| 道路で吸水中 |
写真の説明文です。一行で記述します |
| 1000x667 |
写真のサイズ 横x縦 の形式で指定します。
空白の場合は 800x533 となります |
| 町内 |
撮影場所 記述しない場合は表示されません |
| 撮影地地図 |
アドレスで指定 記述しない場合は表示されません |
| @ |
第２頁に分割して表示する場合は第５項目以降に[ @ ]を付ける |
これらのデータを<>で区切って作成します
ページの概要説明は任意です。横の文字数は枠の中で読みやすいように調整します
これを data.js というファイル名で同じフォルダーに保存します
下記はデータファイルの一例です(data.js)
ファイル名は「年月日_時分秒.jpg」と命名します
大変煩わしいようですが、 「画像ファイルの管理」に詳しく記述してあります
写真は 20080610_092140.jpg と 20080610_092140_s.jpg を準備します
.jpg は自由なサイズ、 _s.jpg はサムネイルで 120x80 ピクセル程度にします
ダウンロード ダウンロードして、必要事項を書き換えて下さい
３．２ index.html ファイルの作成
下記に一例を示します
slide0907.js はJavascriptの外部ファイルです
slide0907.css はスタイルシートです
index_sample.html ダウンロード
ダウンロードして、必要事項を書き換えて下さい。
特に slide0907.js 、slide0907.css のパスは「４．フォルダー構成」を参考に書き換えてください
３．３ 関連ファイルの保存
|
左側のファイル名をクリックするとダウンロードできます
または右クリックして「対象をファイルに保存(A)」、または「名前を付けて画像を保存(S)」で保存してください
|
|
Javascript 外部ファイル サムネイルにマウスを載せると拡大表示 |
|
|
Javascript 外部ファイル |
|
|
スタイルシート |
 |
30x30 px |
ページを閉じるときのアイコン |
 |
1x1 px |
空白調整用 透明画像 |
|
|
32x32 px |
カーソルの非表示用 |
 |
27x21 px |
ヘルプアイコン |
 |
2x2 px |
スライドショウ進行表示用
空白確認用 |
 |
2x2 px |
現在未使用 |
画像は下記のフォルダーに保存してください
「４．フォルダー構成」を参照
image\slideshow\
|
|
|
| ４．フォルダー構成 |
| js/ |
slide0912.js slide0907.js
slide0907.css |
|
|
js 外部ファイル
スタイルシートファイル |
| image/ |
slideshow/ |
close.gif
00_space.gif
cursor.cur
help.gif
slide_bar.gif
slide_bar_mask.gif |
|
slide0907.js で使用する
画像ファイル |
| my_photo/ |
hana_photo/ |
index.html
data.js |
|
花の写真
ページ本体
データファイル |
| photo/ |
20080610_092140.jpg
20080610_092140_s.jpg
|
その他の写真ファイル |
| yama_photo/ |
index.html
data.js |
|
山の風景
ページ本体
データファイル |
| photo/ |
OOO.jpg
OOO_s.jpg |
|
エクスプローラで見ると下記のようになります
ちょっと判りにくいかもしれませんが、たとえば close.gif は
image/slideshow/close.gif となります
これは外部ファイル・スタイルシートおよび gif 画像を各ページ共通に使用するためです
この場合のパス指定は次のようになります
data.js のパス
var pass = "../../" ;//-- 相対パス
index.html のパス
<SCRIPT type="text/javascript" src="data.js"></SCRIPT>
<SCRIPT type="text/javascript" src="../../js/slide0907.js"></SCRIPT>
<LINK rel="stylesheet" href="../../js/slide0907.css"
type="text/css">
|
| ５．終わりに |
どうぞご利用下さい
不明の点は 「私の雑記帳Ｑ・Ａ」からご質問ください
|
2009/07/27
今までのスライドショウをここにまとめました
2009/12/26 slide0912.js 追加 |