Shadowbox.js 2.0 #2

Shadowbox.js 2.0 #1では設定方法について書いたけれど、SWFなどの自動でサイズを取得できないものの表示サイズの設定や、使うだろうと思ういくつかオプションの設定について書いておきます。
Shadowbox.jsにはここで書く以外のオプションの設定やメソッドもあるので、Shadowbox.jsのサイトで確認するとよいと思います。

Shadowbox.js Media Viewer » API
http://mjijackson.com/shadowbox/doc/api.html

サイズ指定（width/height）

サンプル：画像

<a rel="shadowbox;width=160;height=120" href="http://digitrick.net/labs/images/20080702125.jpg" title=" サンプル">サンプル：画像</a>

ギャラリー表示でのループ（options={continuous}）

サンプル：ギャラリー サンプル：ギャラリー サンプル：ギャラリー

<!-- shadowbox[ギャラリー識別子]でギャラリー表示 -->
<a rel="shadowbox[imagesgallery1];options={continuous:true}" href="http://digitrick.net/labs/images/20080501041.jpg" title="画像1">サンプル：ギャラリー</a>
<a rel="shadowbox[imagesgallery1];options={continuous:true}" href="http://digitrick.net/labs/images/20080702124.jpg" title="画像2" class="hidden">サンプル：ギャラリー</a>
<a rel="shadowbox[imagesgallery1];options={continuous:true}" href="http://digitrick.net/labs/images/20080702125.jpg" title="画像3" class="hidden">サンプル：ギャラリー</a>

ギャラリー表示でのスライドショー間隔（options={slideshowDelay}）

サンプル：ギャラリー（スライドショー） サンプル：ギャラリー（スライドショー） サンプル：ギャラリー（スライドショー）

<a rel="shadowbox[imagesgallery2];options={continuous:true,slideshowDelay:3}" href="http://digitrick.net/labs/images/20080501041.jpg" title="画像1">サンプル：ギャラリー（スライドショー）</a>
<a rel="shadowbox[imagesgallery2];options={continuous:true}" href="http://digitrick.net/labs/images/20080702124.jpg" title="画像2" class="hidden">サンプル：ギャラリー（スライドショー）</a>
<a rel="shadowbox[imagesgallery2];options={continuous:true}" href="http://digitrick.net/labs/images/20080702125.jpg" title="画像3" class="hidden">サンプル：ギャラリー（スライドショー）</a>

ギャラリー表示でのカウンター制御（options={counterType}）

サンプル：画像1 | サンプル：画像2 | サンプル：画像3

<a rel="shadowbox[imagesgallery3];options={counterType:'skip'}" href="http://digitrick.net/labs/images/20080501041.jpg" title="画像1">サンプル：画像1</a> | 
<a rel="shadowbox[imagesgallery3];options={counterType:'skip'}" href="http://digitrick.net/labs/images/20080702124.jpg" title="画像2">サンプル：画像2</a> | 
<a rel="shadowbox[imagesgallery3];options={counterType:'skip'}" href="http://digitrick.net/labs/images/20080702125.jpg" title="画像3">サンプル：画像3</a>

Flash表示での背景色（options={flashBgColor}）

サンプル：Flash

<a rel="shadowbox;width=320;height=240;options={flashBgColor:'#ffffff'}" title="サンプル" href="http://digitrick.net/labs/swfs/test.swf">サンプル：Flash</a>

FLV表示でのFLVプレイヤーのURL（options={flvPlayer}）

サンプル：FLV
※オリジナルのFLVプレイヤーを使用する場合、FlashVarsとしてFLVファイルパスを変数fileで受け取るものを作成する必要があります。

<a rel="shadowbox;width=320;height=240;options={flvPlayer:'http://digitrick.net/js/shadowbox/flvplayer.swf'}" title="サンプル" href="http://digitrick.net/labs/flvs/test.flv">サンプル：FLV</a>

QuickTime、WMP表示でのコントローラー表示（options={showMovieControls}）

サンプル：MP4（2.8MB）

<a rel="shadowbox;width=320;height=240;options={showMovieControls:false}" title="サンプル" href="http://digitrick.net/labs/movies/test.mp4">サンプル：MP4（2.8MB）</a>

各表示での自動再生（options={autoplayMovies}）

サンプル：MP4（2.8MB）

<a rel="shadowbox;width=320;height=240;options={autoplayMovies:false}" title="サンプル" href="http://digitrick.net/labs/movies/test.mp4">サンプル：MP4（2.8MB）</a>

表示アニメーション（options={animSequence}）

サンプル：アニメーション1 | サンプル：アニメーション2 | サンプル：アニメーション3

<!-- 縦横同期アニメーション -->
<a rel="shadowbox[imagesgallery4];width=160;height=120;options={animSequence:'sync'}" href="http://digitrick.net/labs/images/20080501041.jpg" title="画像1">サンプル：アニメーション1</a> | 
<!-- 横→縦アニメーション -->
<a rel="shadowbox[imagesgallery4];width=320;height=240;options={animSequence:'wh'}" href="http://digitrick.net/labs/images/20080702124.jpg" title="画像2">サンプル：アニメーション2</a> | 
<!-- 縦→横アニメーション -->
<a rel="shadowbox[imagesgallery4];width=640;height=480;options={animSequence:'hw'}" href="http://digitrick.net/labs/images/20080702125.jpg" title="画像3">サンプル：アニメーション3</a>