Shadowbox.js 3.0.3 の正統な使い方

ダウンロード

Shadowbox.js



2010/11/18 現在 3.0.3 が最新です。バージョンが変わった際にダウンロードした
ファイルのソースは「Date: 2010-04-07 03:27:10 +0000」なんで、半年以上が経過
した安定バージョンです( 前のバージョンはいろいろあったんで )

関連する記事(Shadowboxで表示)

Shadowbox.js : 3.0.1 使用時の注意事項
Shadowbox.js : 3.0.2 が出ました / Shadowbox 内の SWFObject の使い方

※ ブログが重いので、Shadowbox 内でのロードに少し時間がかかります


設置

Japanese を指定すると、.js 内に日本語が utf-8 で記述されます。ですから
ライブラリの参照は以下のようになります。
※ 必ず charset="utf-8" が必要です。

<link rel="stylesheet" type="text/css" href="http://yourdomain.jp/sbx33/shadowbox.css">
<script type="text/javascript" src="http://yourdomain.jp/sbx33/shadowbox.js" charset="utf-8"></script>

adapter に関しては、prototype.js で試してみましたが、ソースコード内の記述が
prototype.js のメソッドを使って書き換えられているだけです
( ソースが少し短くなります )

具体的なサンプル

ライブラリと CSS を貼り付けただけでは規定のオプションとなりますが、init
メソッドでいろいろな初期設定が可能です。以下にそのサンプルを示します。

<script type="text/javascript">
function sbxload( el ) {
}
function sbxchange( el ) {
}
Shadowbox.init(
{
	counterLimit:20,
	overlayColor:'#000000',
	overlayOpacity:0.6,
	onFinish : sbxload,
	onChange: sbxchange

},
function () {
	// 最初の引数はセレクタです。
	// 以下を参照するように指示があります
	// http://wiki.github.com/jeresig/sizzle : Sizzle documentation
	Shadowbox.setup("a.light", {
		gallery: "light",
		continuous: true,
		counterType:"skip"
	});
	// "player", "title", "height", "width", "gallery" は、オブジェクト
	// のプロパティですが、setup メソッドで指定できます
	Shadowbox.setup("a.ggpano", {
		gallery: "test",
		width: 800,
		height: 600,
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.story", {
		gallery: "story",
		continuous: true,
		counterType:"skip"
	});

	// 外部の URL をページ内で表示します
	Shadowbox.setup("a.blog", {
		overlayColor: "#123456",
		width: 1075,
		gallery: "blog",
		continuous: true,
		counterType:"skip"
	});

	// swf を使った youtube の動画のポップアップです
	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
	});
});
</script>

単純なセレクタしか使っていませんが、それでも A 要素に指定されるクラス名
がそのまま gallery 指定になり、その単位で動作が変わるわけです。セレクタ
はもっと複雑なものが可能ですが、配布元では Sizzle documentation を参照
するように誘導されています。


onFinish

カレントのギャラリーが表示されて、アニメーション効果が全て終わった後に
実行されます。引数は、カレントのギャラリーの要素です。


onChange

ギャラリー内での移動が終了した場合に実行されます。引数は既に表示された
要素になるばずです。

以下はイベントが実行された時の引数を Firebug で表示したところです




Youtube のサンプル

<a 
	class="youtube" 
	href="http://www.youtube.com/v/ngInFbTeS7w" 
><img 
	src="http://img.youtube.com/vi/ngInFbTeS7w/1.jpg" 
	style='border-style:solid;border-width:1px;border-color:#000000' 
></a>

Youtube の貼り付けコード取得
( サムネイルをクリックするとプレビュー )

Youtube のサムネイル画像に関しては以下を参照して下さい
YouTube のサムネイル画像

画像 の貼り付けコード取得




ストリートビューのサンプル

<a
	class="ggpano"
	href="http://lightbox.on.coocan.jp/ggv_pano_basic.php?w=800&h=600&a=48.857288&b=2.294404&c=8.24369085737899&d=-40"
>エッフェル塔</a>
<a
	class="ggpano"
	href="http://lightbox.on.coocan.jp/ggv_pano_basic.php?w=800&h=600&a=52.34176&b=4.792075&c=162&d=-24"
>風車</a>

ggv_pano_basic.php は自作のアプリケーションですがたいした事はやっていません。

エッフェル塔
風車


単純に rel を使いたい場合

galleryName = /^(light|shadow)box\[(.*?)\]/i と定義されていますので、
rel="lightbox[myimg]" と rel="shadowbox[myimg]" は同じ扱いになります。

複雑なオプションは rel では動作しないので今回紹介したサンプルのように、
class 単位で事前に定義しておく事が簡単な解決策です。
( JavaScript で addCache メソッドを使う方法もあります )


その他のオプション

continuous: true

一つのギャラリーで複数の画像がある場合に、最後の画像から最初の画像に
移動が可能になります( 最初から最後も移動できます )

counterType: "skip"

複数の画像へ直接リンクが作成されます

counterLimit

counterType が skip の時に有効で、デフォルトは 10 です。指定した
数より多く画像がある場合はその数しかリンクが作成されずに、現在の
画像が常に中心にくるように数字のリンクが配置されます。

slideshowDelay

0 以外を設定すると、その秒数でスライドショーが実行されます。


Shadowbox.js 3.0.3 の正統な使い方

(1) ダウンロード、setup メソッドで事前にギャラリーを定義
(2) YouTube の動画を表示する
(3) 大きな画像を表示する
(4) Windows Media Player を正しく使えるようにする