shadowbox.js ver3.0.3の日本語説明が無いので全部書いてみる。（オプション編）

技術

確認してない項目も結構あるので、これ通りに動くかはわかりません。公式に書いてあるので大丈夫だとは思いますが。


オプション
※オプション要素は通常時、Shadowbox.initかShadowbox.setupに書いてください。
※機能順です。オプション横の括弧内はデフォルト値です。よく使いそうなものや注意点は赤字。
※値は文字列・数字列を正しく設定しないと反映されません。クォートの使いどころに注意。


使えなくなったオプション
■language
国名を入れると言語対応してくれていた（過去形）
実はver3.0からは削られた機能のようで書いても意味は無い。
代わりにダウンロードするときに対応する言語を選べるようになった。
■players
Shadowboxをつかって対応するファイルタイプを指定できた（過去形）
こちらもver3.0からは削られた機能のようで書いても意味は無い。
代わりにダウンロードするときに対応するファイルタイプを選べるようになった。


デザイン関係（要素表示非表示）
■overlayColor（"#000"）
表示時の周りのグレーゾーン（画像以外の部分）の色を指定できます。
■overlayOpacity（0.5）
表示時の周りのグレーゾーン（画像以外の部分）の透明度を指定できます。
■showOverlay（true）
falseにすると表示時の周りのグレーゾーン（画像以外の部分）を非表示にする。
■viewportPadding（20）
ブラウザ縦横の余白を設定できる。px単位。
説明しにくいが、画像がブラウザより大きい時この数値が0だと、ブラウザ幅いっぱいでリサイズ表示する。
デフォルトの20だと20px両横を開けるようにリサイズ表示する。（handleOversizeの設定にも依存します）


表示アニメーション関係
■animate（true）
falseにすると全てのアニメーション表示を無効にする。
■animateFade（true）
falseにすると全てのフェードアニメーション表示（FIFO）を無効にする。
上と似ているが、animateFadeはフェードのみ無効。スライドインやズームインの動作は残る。
■animSequence（"sync"）
リサイズシャドーで使用するアニメーションシーケンスを選択できる。（原文ママ）
分かりにくいので詳細に書くと、Shadowboxで画像などを開いた時、画像が読み込まれる前に黒いウィンドウが小さい状態から大きく開く動作がある。その動作のパターンを選択できる。
"wh"：横に広がってから縦に広がる、"hw"：縦に広がってから横に広がる、"sync" ：両方同時に広がる
noneとかはパラメータに無いので出来ない模様。全部切るにはanimateオプションをfalseにするかresizeDurationを0に設定すれば出来るかも。
■resizeDuration（0.35）
上のリサイズシャドーのアニメーションの時間を設定できる。秒単位。
■initialWidth（320）
上のリサイズシャドーで使用する黒いウィンドウの小さい状態の横幅を設定する。px単位。％は無理？
■initialHeight（160）
上のリサイズシャドーで使用する黒いウィンドウの小さい状態の縦幅を設定する。px単位。％は無理？
■fadeDuration（0.35）
フェードアニメーション（FIFO）の時間を設定できる。秒単位。


画像表示時の設定関係
■handleOversize（"resize"）
指定の横幅、縦幅より大きい画像を表示する時の挙動を設定できる。
"none"：原寸で左上から表示する。はみ出た部分は切り取られる
"resize"：画像をリサイズして表示する。
"drag"：原寸で左上から表示する。画像をドラックして見ることが出来る。
HOMEのExamplesの一番下にサンプル（テキストボタンの三つのリンク）があるので見てみるとよいかも。


動画表示時の設定関係
■autoplayMovies（true）
falseにすると開いたときの動画の自動再生を無効にする。flv、QuickTime、Windows Media Player限定と思われる。
■showMovieControls（true）
falseにすると動画のコントロールバーを非表示にする。QuickTime、Windows Media Player限定と思われる。flvはできると書いていない…
■handleUnsupported（"link"）
表示するためのプラグインが無い、または古い場合の挙動を設定できる。
swf、flv、QuickTime、Windows Media Player限定と思われる。
"link"：ダウンロードリンクなどを表示する、"remove"：表示できない要素をリストから消去する


Flash表示時の設定関係
■flashParams（{bgcolor:"#000000"}）
flashに渡すparam要素を設定できる。デフォルト値に背景色が入っているので、flashを表示する場合は必須項目になるかも。
設定方は配列形式が一番やりやすいと思います。
デフォルト値は置き換えられるので、他の要素を追加しつつbgcolorもそのまま使いたい場合は、あらためてbgcolorを記載する必要があります。
例）flashParams:{wmode:"transparent",quality:"high"}
■flashVars（{}）
flashに渡すFlashVars要素を設定できる。flash表示時に使用。
■flashVersion（"9.0.0"）
flashを表示する時の最低バージョンを設定できる。バージョン以下だと「playerダウンロードしなさい」の代替リンクが出る。


ギャラリーモード関連
■continuous（false）
ギャラリーモード（連番ファイル表示）使用時に、最後の要素を表示している時は次へボタンが出ないが、
trueにすると次へボタンを表示して最初の要素にループさせる。前へボタンも同じ挙動になる。
■counterType（"default"）
ギャラリーモードで左下に数字リンクがあるUIになる。
"default"：数字リンクなし、"skip"：数字リンクあり
■counterLimit（10）
ギャラリーモードで数字リンクがある場合、その数字リンクをいくつ設置するか設定できる。
現在位置から計る模様。
■slideshowDelay（0）
スライドショー機能の設定。秒単位。
0秒を指定すると機能自体がoffになる。
■displayCounter（true）
falseにするとギャラリーモードの左下の数字部分を非表示にする。
■displayNav（true）
falseにするとギャラリーモードの下のナビを全部非表示にする。（数字部分とボタン部分、閉じるボタン含む）
■enableKeys（true）
falseにするとギャラリーモードをキーボードで操作できなくなる。（キーボード…？左右とか元々できるってことだろうか…）


その他機能関係
■modal（false）
trueにすると表示時の周りのグレーゾーン（画像以外の部分）をクリックすると、画面を閉じるアクションを無効化できる。なんでtrue…？
■troubleElements（["select", "object", "embed", "canvas"]）
Shadowboxを開いている時には、非表示にするタグ名を設定する。
おそらくIE6やandroid対策。どちらもz-indexが上手く聞かない時に使うといい。ナイス設定。
ただデフォルト値から変更することは無いと思われるので放置安定。
■skipSetup（ture）
Shadowboxを開くたびに設定を初期化して再読み込みする機能？
falseにすると同じモードの場合なら読み込み時間の短縮になるということ。true安定。


JS連携
■onClose
onClose要素を付与。発動条件は「Shadowboxを閉じた時」
関数要素は一つで、最後に表示されたギャラリーの要素が入るらしいです。
例）onClose:function(data){}
■onOpen
onOpen要素を付与。発動条件は「Shadowboxを開いた時」
関数要素は一つで、現在のギャラリーの要素が入るらしいです。
このコールバックからブール値falseを返すことで、開口部からシャドーを防ぐことができます。（原文ママ）
な、なんのこっちゃ…リサイズシャドーを禁止できるということかもしれません。
■onChange
onChange要素を付与。発動条件は「ギャラリーモードで次の画像ボタンを押した後、現在表示の画像が消えた時」
関数要素は一つで、表示されようとしているギャラリーの要素が入るらしいです。
■onFinish
onFinish要素を付与。発動条件は「ギャラリーモードでつかう要素のロードが終わった時」
関数要素は一つで、現在のギャラリーの要素が入るらしいです。


一応設置方法も
1. cssとjsを読み込む

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>

2. 設定する

<script type="text/javascript">
Shadowbox.init();
</script>

もしくは

<script type="text/javascript">  
Shadowbox.init({
    //オプション記載（例：flashの場合）
    flashParams:{wmode:"transparent"},

});  
</script>

3. リンクに設置する
通常

<a rel="shadowbox;width=535;height=330" href="milk.swf">

ギャラリーモード

<a href="beach.jpg" rel="shadowbox[Vacation];width=535;">The Beach</a>
<a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>


拡張編はこちら（まだ）