外部ギャラリーコンテンツの表示

wijgallery ウィジェットでは、ユーザーは外部ソースからコンテンツを表示できます – これには、ギャラリーインタフェース内でインタラクティブ操作できる Web ページの表示が含まれます。例については、Web サイト（ http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Orientation ）にアクセスし、MVC コントロールエクスプローラの Gallery> frame サンプルのライブデモをご覧ください。

外部コンテンツを表示するには、以下の手順を実行します。

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

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

ソースビュー	コードのコピー
<div id="wijgallery" class=""> <ul class=""> <li class=""><a href="http://www.yahoo.com/"><img src="http://cdn.wijmo.com/images/yahoo_thumb.png" title="Yahoo" alt="Yahool" /></a></li> <li class=""><a href="http://www.componentone.com"><img src="http://cdn.wijmo.com/images/componentone_thumb.png" title="ComponentOne" alt="ComponentOne" /></a> </li> <li class=""><a href="http://www.microsoft.com"><img src="http://cdn.wijmo.com/images/microsoft_thumb.png" title="Microsoft" alt="Microsoft" /></a></li> </ul> </div>

ソースビュー

コードのコピー

<div id="wijgallery" class="">
    <ul class="">
        <li class=""><a href="http://www.yahoo.com/"><img src="http://cdn.wijmo.com/images/yahoo_thumb.png" title="Yahoo" alt="Yahool" /></a></li>
        <li class=""><a href="http://www.componentone.com"><img src="http://cdn.wijmo.com/images/componentone_thumb.png" title="ComponentOne" alt="ComponentOne" /></a> </li>
        <li class=""><a href="http://www.microsoft.com"><img src="http://cdn.wijmo.com/images/microsoft_thumb.png" title="Microsoft" alt="Microsoft" /></a></li>
    </ul>
</div>

このマークアップは、Web サイトのコンテンツを含むページに１つのギャラリーウィジェットを追加します。次の手順では、ギャラリーを初期化します。

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

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijgallery,#wijgallery2").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,#wijgallery2").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］を押してアプリケーションを実行し、ギャラリーに Web サイトのコンテンツが含まれていることを確認します。現在表示されている Web サイトを変更するには、〈次へ〉または〈前へ〉ボタンを押します。