ライトボックスでの外部コンテンツとビデオの表示

wijlightbox ウィジェットは、ビデオ、Flash ファイル、および iFrame 内の外部 Web サイトなどの複数のタイプのコンテンツを表示できます。この例では、wijlightbox ウィジェットに表示する各タイプのコンテンツを追加します。

以下の手順を実行します。

ASP.NET MVC 4 Wijmo アプリケーションを作成します。
ソリューションエクスプローラで Scripts フォルダを右クリックし、［追加］→［既存の項目］を選択し、ダイアログボックスで swfobject.js ファイルを特定して追加します。
使用可能なファイルがない場合、MVC コントロールエクスプローラのサンプル内で見つけることができます。
ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。

ページの <head> タグに swfobject.js ファイルへの参照を追加します。

ソースビュー	コードのコピー
<script src="../../Scripts/swfobject.js" type="text/javascript"></script>

これは Flash ファイル用に必要です。

以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<a href="http://cdn.wijmo.com/movies/skip.swf" rel="wijlightbox[stock];width=400;height=300"> <img src="http://cdn.wijmo.com/images/happygirl.png" title="幸せな少女" alt="幸せな少女" /></a> <a href="http://www.componentone.com" rel="wijlightbox[stock]"> <img src="http://cdn.wijmo.com/images/componentone_thumb.png" alt="ComponentOne" /></a> <a href="http://www.microsoft.com" rel="wijlightbox[stock]"> <img src="http://cdn.wijmo.com/images/microsoft_thumb.png" alt="Microsoft" /></a> <a title="Mindrelic - 夏のタイムラプス動画/2009 年秋" href="http://player.vimeo.com/video/8087882" rel="wijlightbox;player=iframe"><img class="border" alt="" src="http://cdn.wijmo.com/images/mindrelic.png"/></a> <a title="ニューヨーク州ロチェスターのタイムラプス動画" href="http://player.vimeo.com/video/5244737" rel="wijlightbox;player=iframe"><img class="border" alt="" src="http://cdn.wijmo.com/images/rochester.png"/></a> <a title="キーボードに触る猫" href="https://www.youtube.com/v/J---aiyznGQ?version=3" rel="wijlightbox;player=swf"><img class="border" alt="" src="http://cdn.wijmo.com/images/keyboardcat.png"/></a> <a title="くしゃみをするパンダ" href="http://www.youtube.com/v/FzRH3iTQPrk?version=3" rel="wijlightbox;player=swf"><img class="border" alt="" src="http://cdn.wijmo.com/images/panda.png"/></a> <a title="会話をする猫" href="http://www.youtube.com/v/z3U0udLH974?version=3" rel="wijlightbox;player=swf"><img class="border" alt="" src="http://cdn.wijmo.com/images/talkingcats.png"/></a> </div>

ソースビュー

コードのコピー

<a href="http://cdn.wijmo.com/movies/skip.swf" rel="wijlightbox[stock];width=400;height=300">
<img src="http://cdn.wijmo.com/images/happygirl.png" title="幸せな少女" alt="幸せな少女" /></a>
<a href="http://www.componentone.com" rel="wijlightbox[stock]">
<img src="http://cdn.wijmo.com/images/componentone_thumb.png" alt="ComponentOne" /></a>
<a href="http://www.microsoft.com" rel="wijlightbox[stock]">
<img src="http://cdn.wijmo.com/images/microsoft_thumb.png" alt="Microsoft" /></a>
<a title="Mindrelic - 夏のタイムラプス動画/2009 年秋" href="http://player.vimeo.com/video/8087882" rel="wijlightbox;player=iframe"><img class="border" alt="" src="http://cdn.wijmo.com/images/mindrelic.png"/></a>
<a title="ニューヨーク州ロチェスターのタイムラプス動画" href="http://player.vimeo.com/video/5244737" rel="wijlightbox;player=iframe"><img class="border" alt="" src="http://cdn.wijmo.com/images/rochester.png"/></a>
<a title="キーボードに触る猫" href="https://www.youtube.com/v/J---aiyznGQ?version=3" rel="wijlightbox;player=swf"><img class="border" alt="" src="http://cdn.wijmo.com/images/keyboardcat.png"/></a>
<a title="くしゃみをするパンダ" href="http://www.youtube.com/v/FzRH3iTQPrk?version=3" rel="wijlightbox;player=swf"><img class="border" alt="" src="http://cdn.wijmo.com/images/panda.png"/></a>
<a title="会話をする猫" href="http://www.youtube.com/v/z3U0udLH974?version=3" rel="wijlightbox;player=swf"><img class="border" alt="" src="http://cdn.wijmo.com/images/talkingcats.png"/></a>
</div>

このマークアップは、ライトボックスウィジェットのコンテンツをページに追加します。

前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijlightbox ウィジェットを初期化します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ controlsPosition:'outside', textPosition:'outside' }); }); </script>

このスクリプトはライトボックスウィジェットを初期化します。

このトピックの作業結果

［F5］を押して、アプリケーションを実行します。Flash ファイルのサムネイル画像、クリックすると iFrame に表示される２種類の Web サイト、５種類のビデオ（このうち２種類はクリックすると iFrame に表示される）がライトボックスに含まれていることを確認します。