ギャラリーへのビデオコンテンツの取り込み

wijgallery ウィジェットでは、ユーザーはビデオコンテンツを表示できます。例については、Web サイト（ http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Orientation ）にアクセスし、MVC コントロールエクスプローラの Gallery > Videos サンプルのライブデモをご覧ください。

ビデオコンテンツを取り込むには、以下の手順を実行します。

ASP.NET MVC 5 Wijmo アプリケーションを作成します。
ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。

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

ソースビュー	コードのコピー
<div id="wijgallery" class=""> <ul class=""> <li class=""> <a href="https://www.youtube.com/v/J---aiyznGQ?version=3"> <img src="http://cdn.wijmo.com/images/keyboardcat.png" title="キーボードに触る猫" alt="キーボードに触る猫" /></a> </li> <li class=""> <a href="http://www.youtube.com/v/FzRH3iTQPrk?version=3"> <img src="http://cdn.wijmo.com/images/panda.png" title="くしゃみをするパンダ" alt="くしゃみをするパンダ" /></a> </li> <li class=""> <a href="http://www.youtube.com/v/z3U0udLH974?version=3"> <img src="http://cdn.wijmo.com/images/talkingcats.png" title="会話をする猫" alt="会話をする猫" /></a> </li> </ul> </div>

ソースビュー

コードのコピー

<div id="wijgallery" class="">
    <ul class="">
        <li class="">
            <a href="https://www.youtube.com/v/J---aiyznGQ?version=3">
            <img src="http://cdn.wijmo.com/images/keyboardcat.png" title="キーボードに触る猫" alt="キーボードに触る猫" /></a>
        </li>
        <li class="">
            <a href="http://www.youtube.com/v/FzRH3iTQPrk?version=3">
            <img src="http://cdn.wijmo.com/images/panda.png" title="くしゃみをするパンダ" alt="くしゃみをするパンダ" /></a>
        </li>
        <li class="">
            <a href="http://www.youtube.com/v/z3U0udLH974?version=3">
            <img src="http://cdn.wijmo.com/images/talkingcats.png" title="会話をする猫" alt="会話をする猫" /></a>
        </li>
    </ul>
</div>

このマークアップは、３種類のビデオを含む１つのギャラリーウィジェットをページに追加します。次の手順では、ギャラリーを初期化します。

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

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"< $(document).ready(function () { $("#wijgallery").wijgallery({ showControlsOnHover:false, thumbsDisplay: 4, thumbsLength: 100, mode:"iframe", showCaption:false, showTimer:false }); }); </script< <style type="text/css"< #wijgallery { width:750px; height:500px; } </style<

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript"<
    $(document).ready(function () {
        $("#wijgallery").wijgallery({
            showControlsOnHover:false,
            thumbsDisplay: 4,
            thumbsLength: 100,
            mode:"iframe",
            showCaption:false,
            showTimer:false
        });
    });
</script<
<style type="text/css"<
    #wijgallery
    {
        width:750px;
        height:500px;
    }
</style<

上記のスクリプトとマークアップはギャラリーを初期化します。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、ギャラリーウィジェットにビデオが表示されることを確認します。現在表示されているビデオを変更するには、〈次へ〉または〈前へ〉ボタンを押します。