shadowbox

しろうさぎのwebnotebook

エビアン（evian）のCMライブラリーで見つけた、
動画をLightBox風に表示させることができる「Shadowbox」。


YouTube動画や、拡大画像表示として広範囲で利用できるすぐれもの！


Prototype、jQuery、YUI、Extなど複数のJavaScriptのライブラリに対応した、画像や動画などを拡大表示できるLightbox風のスクリプトととして、多数ある Lightbox風スクリプトの中でも充実した機能を持っています。




demo

セッティング方法

配布元の「Shadowbox.js」よりダウンロードします。

・併用するJavaScriptのライブラリは、下記の中から好きなものを選べます。

（※「jQuery」でダウンロードしました。）


・拡大表示できるメディア

  • 画像(PNG, JPEG, GIFなど)
  • 動画(FLV, QuickTime, Window Media Player)
  • ウェブページ


<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init（）;
</script>

ただし、
ダウンロードする際に、言語のサポートで「japanese」を選択した場合は、
「charset="utf-8"」が必要になる様です。

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js" charset="utf-8"></script>
<script type="text/javascript">
Shadowbox.init（）;
</script>


<a href="image.jpg" rel="shadowbox">我が家のわんこ</a>
タイトル表示をする場合

<a href="image.jpg" rel="shadowbox" title="我が家のわんこ">我が家のわんこ</a>
グループ化する場合

<a href="image01.jpg" rel="shadowbox[dogs]" title="我が家のわんこ1">我が家のわんこ1</a>
<a href="image02.jpg" rel="shadowbox[dogs]" title="我が家のわんこ2">我が家のわんこ2</a>
<a href="image03.jpg" rel="shadowbox[dogs]" title="我が家のわんこ3">我が家のわんこ3</a>
サイズ調整をする場合

<a href="image.jpg" rel="shadowbox;height=140;width=120">我が家のわんこ</a>
YouTubeの場合（「エビアンローラーベイビー」より）

【埋め込みコード】

上記の赤文字部分のURLをリンク先に指定する。

手動再生の場合

<a href="http://www.youtube.com/v/DbWhL-v19NY?version=3" rel="shadowbox;width=640;height=385;player=swf"><img src="images/pic_01_01.jpg" alt="ムービーを再生する" width="171" height="189" class="rollover" /></a>
自動再生の場合

<a href="http://www.youtube.com/v/DbWhL-v19NY?version=3&autoplay=1" rel="shadowbox;width=640;height=385;player=swf"><img src="images/pic_01_01.jpg" alt="ムービーを再生する" width="171" height="189" class="rollover" /></a>