フォトスライドショー (画像専用)

画像のスライドショーシステムです。
スライドショー２にある汎用のマルチスライドショーよりも画像用に特化した物です。 特化部分はスライドの待ち時間に次の画像を読み込んでしまうと言うやり方です。 また、一度読み込んだ画像は保持されるので何度も同じ画像を読み込みません。

説明はサンプルの下の後に。

サンプルとダウンロード

---

■上位ブラウザ用 [ DOM解釈可能なブラウザ ]

これは八甲田・十和田湖の風景

・写真をクリックするとスライドショーが開きます。
・文字などのアンカーから呼び出すこともできます。
・ページに埋め込みも可能です。
・始める位置を指定できるので単なる実寸画像ビュアーとしても使えます。
・ボタン類は非表示にする事が可能です。
・手動・自動の切替が可能です。
・進行方向(カウントアップ・ダウン)の切替が可能です。
・スライドショーの秒数を1〜99秒まで設定可能です。
・全スライドを無限ループさせる事が可能です。
・スライドショーの キーボードによる操作が可能です。
・自動スライド中はインターバル中に次の画像が読み込まれます。
・画像のサイズに合わせて自分でサイズ調整も可能。
・簡単なテーブル構造なのでスライドショー画面の変更も自由に。
・画像の数は自由です。
・古いブラウザ用の簡易スライドも用意してあります。
・手動で登録書込みするのが面倒ですが、ローカルでも使えます。

・MSIE4以上のブラウザに限り下記も追加
・2秒以上の自動スライドではトランジション(フェードアウト等)を付けられます
・25種類の効果から選べます。

---

使用方法

---

１.ZIPファイルをダウンロードして解凍してください。

２．使い方のケースに合わせて呼び出し元を決める

• そのままページとして使う場合

この場合は slideshow.htmを普通にアンカーで呼び出して使ってください。 自分のページに埋め込みたい場合も、このslideshow.htmを利用してページを作ってください。 基本的に表示用、操作ボタン用のテーブルだけがBODY内にありますので、自分なりに配置を工夫するなどして改変してください。


• ポップアップウィンドウで呼び出す場合

この場合はポップアップウィンドウをどう呼び出すか？で使い方が別れます。
base.htm という呼び出しページのサンプルをZIPにいれてありますので参考にしてください。

単純にスライドショーを呼び出すだけなら用意してあるJavaScriptによるポップアップで呼び出してください。
サムネイルやサムネイル代わりの文字リストメニューなどから呼び出す場合は、 それぞれの呼び出し元に対応させてスライドショーの表示も対応させられます。 サムネイルで呼び出す場合は、slideshow.htmに登録する画像リストの番号に対応させてください。 ポップアップウィンドウのサイズも必要に応じて自分で変更してください。 これもbase.htmのソースの中にやり方が書いてありますので参考にしてください。

３．slideshow.htm、oldshow.htmの設定

用意してあるブラウザ判定呼び出しJavaScriptを利用する場合は、slideshow.htmとoldshow.htm両方設定。

• HTML用文字コードの設定 必須

まず自分のサーバー環境など合わせて METAタグの文字コードセットを行ってください。 配布品はWindowsで作成したShift_JISになっています。


• 画像ファイルの設定 必須

urllist[1] = 'パス+画像ファイル名';
urllist[2] = 'パス+画像ファイル名';
urllist[3] = 'パス+画像ファイル名';
・
・
・
この様に同じ書き方の法則で1から順に画像ファイルの数だけ、このリストを書いてください。 番号を途中飛ばす事はしないでください。httpからのURLも使えます。


• スライドショーの初期値の設定 任意

古いブラウザ用のoldshow.htmにはありません。
ループ設定・自動設定・速度・方向 について設定できる項目があります。
初期値を自動にするなど、必要であれば自分の用途に合わせて変更してください。
var loopsys = 0; //ループ 初期値 [ 0:ループしない 1:ループする ]
var auto = 0; //自動スライド 初期値 [ 0:しない 1:する ]
var speed = 5000; //自動スライド 速度 初期値 1秒=1000 で設定
var crease = 1; //自動スライド 進行方向 アップが1、ダウンが0;



• IE用トランスフィルター設定 任意

トランスフィルター効果を使うかどうか？を設定
自分で確認できない方は使わない方が良いです。
使う場合 1、使わない場合0 */
var filter=1;

フィルターを使う場合はそのトランスフィルターのタイプを設定
(0-23 revealTrans, 24 blendtrans) 0-24の番号で指定します。
var ftype = 24;

トランスフィルターとは画像が入れ替わる時に良く使われるフェードイン・アウトなどの特殊な効果です。 IEの初期DHTML用の方式ですのでIE4以上に対応しています。 その代わりIE5.5以以降に追加されたフィルター効果は選択できません。
2秒以上の間隔の自動スライドショーの時だけ付くようになっています。

コレで標準設定は終わりです。

４．注意事項など

• JavaScriptについて

セキュリティ面などからJavaScirptをブロックしてる人も増えています。 このスライドショーはJavaScriptですから無効になっていれば動作しません。 そういったアナウンスを掲載するページに載せてください。
また自動ポップアップなどの場合もブロックされる事も多いので、 ビジターが自分の意思で起動できるようにするべきです。


• 画像について

httpから始まるファイルの指定ができますから、自分のサイト以外の画像も読み込めます。 が、他人の画像を自分のサイト内で利用するのはマナーや著作権違反になりますので注意してください。 また、画像リンク先が不明になって読込ができない場合などは、 読込ができるまで100ほど試行して無理ならスライドショーは止まります。

---

改造アドバイス

---

スクリプト(slideshow.htm)について少し解説しておきます。

• 操作ボタン不要のケース

HTMLファイル内300行目あたりに 説明があります。
操作ボタン用テーブルを別にしてありますので、このテーブルにstyle="display:none;"をつけて 非表示にしてしまってください。操作ボタンテーブルを削除する事はやめてください。


• キーボード入力をやめる

HTMLファイル内220行目付近に、document.onkeydown = KeyCheck;と言う1行があります。 コレをコメントアウト、または削除する事でキーボードからの操作を受け付けなくなります。 コレを行った場合は操作ボタンテーブル内のmouseoverで関数に渡す引数で対応キーの操作説明があります。 これを削除するか内容を変えてください。


• ポップアップウィンドウのサイズ変更に伴うレイアウト変更

呼び出しでポップアップウィンドウのサイズを変更した場合に、ウィンドウ内のテーブルレイアウトを変えた方が見栄えがよくなる場合もあります。 こういう場合は先ほどの操作ボタンの外側を囲んでるテーブルの幅や高さ設定をして目的のレイアウトにあわせてください。 ID変更等はしないように。 背景色などは HTMLファイル内のCSS記述部分を変更してください。


• 右クリックの禁止

BODYタグにoncontextmenu='return false'を付ければ禁止できあます。 ファイルの場所はすぐわかるので、ソースや画像の場所を知られたくない場合にもあまり有効ではないです。


• ファイルサイズ(容量)の大きい画像を扱う(先読み)

HTMLファイル内40行目付近に次の1行があります
for(i=1; i<urllist.length; i++){ tmpImg[i] = new Image(); }
この下に
for(i=1; i<urllist.length; i++){ tmpImg[i].src = urllist[i]; }
この1行を書き加えてください。 これで、ファイルが仮画像オブジェクトのSRCとして読み込まれます。


• オートの最低秒数の変更

HTMLファイル内60行目あたりの次の行
if(tmp < 1 ){ tmp = 1; v_speed.value =1; }
これを 最低を5秒にしたいなら
if(tmp < 5 ){ tmp = 5; v_speed.value =5; }
と変更してください。


• オートの最高秒数の変更

if(tmp > 99){ v_speed.value = 99; }
を、例えば3分なら 180秒なので
if(tmp > 180){ v_speed.value = 180; }


• ボタン類を画像に変更

これは対応させていません。


• 初期表示メッセージ

HTML内250行目付近に
v_msg.innerHTML = 'PhotoSlideShow ・・・';
と言う部分があります。この右項目の文字がそれにあたります。
スクリプト内にARTEMISへのリンクなどの著作者表示が残っていれば この部分は変更して構いません。

スライドショーを綺麗に見せる為には、表示する画像のサイズ(幅・高)を揃える方が良いです。 横型と縦型があるのは仕方ないとしても、その2種類の画像サイズで統一します。

MSトランスフィルターサンプル

---

このサンプルで確認して
var ftype= 数字;
を自分(設置者)の好みのものに変更してください。

var ftype =

0-23はrevealTran、24はblendTrans
23は0-22のパターンからランダム仕様。

バグ・修正・変更 等

---

[ 2007/12/20 ]
操作上起こり得る部分的なバグに対処・修正

[ 2007/12/21 ]
送り・戻りを押すと手動に戻るのをやめて自動なら自動のまま に変更

[ 2008/01/11 ]
Operaに対応させました。
FireFoxでスルーされる障害のないエラーも修正。

[ 2008/01/12 ]
修正中のミスで起動しなくなってしまったのを修正。

---