マルチスライドショー (汎用：画像・文字etc)

画像だけでなく文字列も可能なスライドショーシステムです。
文字列も可能なので、当然HTMLも可能でリンク付画像などの掲載もできます。
ページの片隅につけて、広告の差し替えなどにも使えます。
使う側のアイデア次第で利用方法に幅のあるスライドショーのシステムです。
方法が innerHTML の書換えと言う方法を使いますので、IE4、NN6以上のブラウザでしか有効ではありません。 下位ブラウザの切捨てが必要になります。

説明はサンプルの後に。

サンプルとダウンロード

---

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

これは『あみあみ』と言うショップで買える(予約できる)リストを
サムネイル化 → 詳細表示＆リンク スライドと言う形にして見ました。
(サムネイルはスライドショー起動、スライド内の表示はお店へのリンク)
2007年末現在の予約商品等です

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

---

使用方法

---

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

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

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

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


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

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

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

３．slideshowmulti.htmの設定

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

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

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


• データ数の設定 必須

表示させるデータの数を var max = 25;
の数字の分部分を変えて設定してください。


• データファイルの設定 必須

HTMLファイル最下部の方にある<!-- 表示データ格納場所 -->より下に、 データを


<div id="data1" class="hidden">

ココにデータソース

</div>


の形式で、１つ１つのデータをDIVタグで囲むように して記述してください。 この様にしてIDをdata1から順に画像ファイルの数だけ、この形のリストを作ってください。 番号を途中飛ばす事はしないでください。
この位置に書き込めばポップアップウィンドウをスクロールバー無しで開いておけば見えませんが、 一応、CSSで非表示にして隠してしまいます。


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

ループ設定・自動設定・速度・方向 について設定できる項目があります。
初期値を自動にするなど、必要であれば自分の用途に合わせて変更してください。
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ですから無効になっていれば動作しません。 そういったアナウンスを掲載するページに載せてください。
また自動ポップアップなどの場合もブロックされる事も多いので、 ビジターが自分の意思で起動できるようにするべきです。


• データについて

データをスライドショー化させると言う事と、 Javascriptを知らなくても簡単にデータを記述できるようにしてある為、 スライドショーが読み込まれた時点で、全てのデータが読み込まれます。 JavaScriptはページがロードされてから動くようにしてありますが、 大量のデータや重いデータが多くスライドショーの読み込みに時間がかかると 予期せぬエラーが出る事があります。


• 画像の場合

画像の場合は、画像がきちんと読み込まれてから表示される方が良いので、 読み込みチェック(IEなら)を行えるPhotoスライドショーの方が向いています。

---

改造アドバイス

---

スクリプト(slideshow.htm)について少し解説しておきます。
(行数は単なる目安です)

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

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


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

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


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

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


• 右クリックの禁止

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


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

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

スライドショーを綺麗に見せる為には、表示するデータの形式を最初から統一するようにします。