琴線に触れる

いくつかのバリエーションですが、実際ギャラリーで動作しています。

Shadowbox.init は文字通り初期化用のメソッドで、全体で共通の環境を設定
した上で、コールバック関数を指定して個別の設定を行う関数を第二引数に
指定しています。ここではインラインで指定していますが、関数を別に定義
して関数名を指定する事もできます。

ここで全体指定は一般的に言われる「連想配列」のような書式で一括で渡
されており、counterLimit は、表示するページリンクの最大数です。読み込
む時に全体を覆うペース色を overlayColor で黒を指定し、その時の透過度
を overlayOpacity で指定しています。オリジナルのデフォルト値と説明は
こちらにあります。

Shadowbox.setup は、単純にはクラス毎のグループで設定を行うメソッドで
厳密には第一引数でセレクタを指定します。例では、a.クラス名 でグループ
化していますが、オリジナルページでは、'a[title="Sweetness"]' というよう
な指定も行っており、これは外部ライブラリのSizzle.js を使用しているとの
事です。

第二引数はやはり「連想配列」のような書式で一括でプロパティをセットし
ており、gallery が shadowbox[ギャラリー名] に対応する値になります。
continuous と counterType はセットで使い、ページリンクを作成して直接
リンクを作成すると同時に最後から最初、最初から最後とループして順に移動
できる事を意味します。

width と height はそれぞれ指定できますが、両方指定しているのはサイズ
固定の Google ストリートビュー用です、横幅のみ固定は外部のブログを内部
に表示しています。YouTube 用はさらに player で SWF を直接埋め込む事を
意味します。

最後のセットでは、slideshowDelay を指定してスライドショーの時間を指定
していおり、デフォルトの 0 ですとスライドショーにはなりません。スライド
ショーの時のみ一時停止/再生アイコンが表示され、スペースキーで切り替わり
ます。


ちなみに、ウインドウを閉じるのは ESC か Q か X です。

Shadowbox.init(
{
	counterLimit:20,
	overlayColor:'#000000',
	overlayOpacity:0.6
},
function () {
	Shadowbox.setup("a.light", {
		gallery: "light",
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.ggpano", {
		gallery: "test",
		width: 800,
		height: 600,
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.blog", {
		overlayColor: "#123456",
		width: 1075,
		gallery: "blog",
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.youtube", {
		gallery: "youtube",
		width: 835,
		height: 505,
		player: "swf",
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.main", {
		gallery: "main",
		continuous: true,
		counterType:"skip",
		slideshowDelay: 6
	});
});