Prototype & script.aculo.usベースの単純・簡単 連続スライドショークラスのダウンロードと解説
■ 概要
Flashが動かないiPodの存在に留意されるお客様に対応するため、javascriptで単純なスライドショーを書く機会も多くなりました。
毎回同じようなスクリプトを書くのも何なので、 Prototype+script.aculo.usベースの簡単なクラスを作成しました。
機能的には、
MIT-style Licenceとしておりますので、よろしければご利用ください。
毎回同じようなスクリプトを書くのも何なので、 Prototype+script.aculo.usベースの簡単なクラスを作成しました。
機能的には、
- 指定複数イメージの連続表示
- 表示領域より大きなイメージの上下,左右スクロール表示
- ループ回数の指定
- イメージクリック時、ジャンプ先リンクURLの指定
MIT-style Licenceとしておりますので、よろしければご利用ください。
■ サンプル
■ ダウンロード(free)
下のダウンロードボタンからダウンロード後、適当な場所に解凍してください。
【解凍後ファイル一覧】
【解凍後ファイル一覧】
-
cycSlidesShow.js : ライブラリー本体です。
- Prototype : prototype.js ver1.6以上 http://www.prototypejs.org/から
- script.aculo.us : ver1.8以上 http://www.script.aculo.us/から(effects.js)
■ ライブラリを読み込む
【書式】
<script src="【URI1】/prototype.js" type="text/javascript"></script>
<script src="【URI2】/effects.js" type="text/javascript"></script>
<script src="【URI3】/cycslidesShow.js" type="text/javascript"></script>
ライブラリを読み込むには、<script>タグでprototype.jsを読み込ませた後、 script.aculo.usのeffects.jsを読み込み、最後に本体のcycSlidesShow.jsを読み込ませる必要があります。
【サンプル】
<script src="【URI1】/prototype.js" type="text/javascript"></script>
<script src="【URI2】/effects.js" type="text/javascript"></script>
<script src="【URI3】/cycslidesShow.js" type="text/javascript"></script>
- 【URI1】: prototype.jsがあるURI、ファイルパス
- 【URI2】: script.aculo.usライブラリがあるURI、ファイルパス
- 【URI3】: cycSlidesShow.jsがあるURI、ファイルパス
ライブラリを読み込むには、<script>タグでprototype.jsを読み込ませた後、 script.aculo.usのeffects.jsを読み込み、最後に本体のcycSlidesShow.jsを読み込ませる必要があります。
【サンプル】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="../js/lib/prototype.js" type="text/javascript"></script> <script src="../js/src/effects.js" type="text/javascript"></script> <script src="../js/cycSlidesShow.js" type="text/javascript"></script> <script src="../js/mySampleLoad.js" type="text/javascript"></script> //......mySampleLoad.js:スライドショーを表示開始するjs <title>【サンプル】</title> </head> <body> <div id="photos" style="width:400px; heigth:260px;" > <!-- ここがスライドショー表示エリアです --> </div> </body> </html>続いて、mySampleLoad.jsでスライドショーを開始します。
■ スライドショーを開始する
【サンプル】
new cycSlidesShow(【id】, 【slides】 ,【options】)
【slides】で指定する内容について
【options】で指定できる表示オプション
//mySampleLoad.js
Event.observe(document, "dom:loaded", function(){
var slideInfs = [
{img:'./img/photos/s1.jpg', scrool:'H', direction:0,
sDuration:2, anchor:"./abc.html"},
{img:'./img/photos/s2.jpg', scrool:'V', direction:1,
sDuration:2, anchor:""},
{img:'./img/photos/s5.jpg', scrool:'H', direction:1,
sDuration:3, anchor:"./def.php"},
{img:'./img/photos/s3.jpg', scrool:'H', direction:0,
sDuration:3, anchor:"./ghi.html"},
{img:'./img/photos/s4.jpg', scrool:'H', direction:1,
sDuration:2, anchor:""}
];
//個々のスライドイメージのプロパティーをオブジェクト配列で指定します。
new cycSlidesShow('photos', slideInfs, {interval:6,
duration:2.5,
parallel:true
});
//スライドショーを生成します
})
【書式】new cycSlidesShow(【id】, 【slides】 ,【options】)
- 【id】: スライドショーを表示するブロックエレメント(DIV)のidを指定
- 【slides】: 個々のスライドのプロパティーを指定したオブジェクトの配列
- 【options】: 各種オプション(省略化)
【slides】で指定する内容について
| 名前 | 内容 |
|---|---|
| img | スライドイメージの格納場所 |
| scrool | 表示領域より大きなサイズを持つイメージのスクロール方法を指定します。 'H':水平に移動 'N':垂直に移動 'N':スクロールしない |
| direction | スクロール方向の指定 1:右から左、又は上から下へ 0:左から右、又は下から上へ |
| sDuration | スクロールエフェクトの実行時間を秒単位で指定します。 |
| anchor | イメージクリック時、ジャンプ先リンクURLを指定します。 ジャンプ先が無い場合、空文字列("")を指定してください。 |
【options】で指定できる表示オプション
| 名前 | 初期値 | 内容 |
|---|---|---|
| interval | 5 | 次のスライドへと切り替わるまでの時間(秒単位) |
| duration | 0.5 | フェードイン/アウトのエフェクト実行時間(秒単位) |
| limmit | 0 | スライドショー繰り返し回数 0を指定(初期値)した場合、連続ループ |
| parallel | true | フェードイン/アウトを同期エフェクトとするか、true または false で指定します。 |
■ その他
-
スライド表示領域にposition:'relative'を指定するため、prototype.jsのele.relativize()関数を使用するとIEでエラーとなります。
これを回避するため、本ライブラリ内ではele.setStyle({position:'relative',top:'0px',left:'0px'})でrelative指定としています。 - ご意見・ご感想やバグのご報告などは、 こちらからお願いします。
工事メイト for Smart