ダウンロード
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 を正しく使えるようにする
posted by
at 2010-11-18 14:36
|
Shadowbox
|

|