ComponentOne Studio MVC4 Classic ヘルプ
ギャラリーの向きの設定
MVC Classic ウィジェット > Wijgallery > ギャラリーの向きの設定

wijgallery ウィジェットは、水平および垂直方向の両方の向きをサポートします。この機能を利用するには、単に orientation オプションを設定します。例については、Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Orientation）にアクセスし、MVC コントロールエクスプローラの Gallery > Orientation サンプルのライブデモをご覧ください。

ギャラリーの向きを設定するには、以下の手順を実行します。

  1. ASP.NET MVC 4 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div>
<h3>向きは "vertical"、左側</h3>
<div id="wijgallery" class="">
    <ul class="">
        <li class=""><a href="http://lorempixum.com/750/300/sports/1">
            <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="キャプション 1" />
        </a></li>
        <li class=""><a 
href="http://lorempixum.com/750/300/sports/2">
            <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="キャプション 2" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/3">
            <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="キャプション 3" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/4">
            <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="キャプション 4" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/5">
            <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="キャプション 5" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/6">
            <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="キャプション 6" />
        </a></li>
    </ul>
</div>
<br />
<h3>向きは "vertical"、右側</h3>
<br />
<div id="wijgallery1" class="">
    <ul class="">
        <li class=""><a href="http://lorempixum.com/750/300/city/1">
            <img alt="1" src="http://lorempixum.com/200/150/city/1" title="キャプション 1" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/2">
            <img alt="2" src="http://lorempixum.com/200/150/city/2" title="キャプション 2" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/3">
            <img alt="3" src="http://lorempixum.com/200/150/city/3" title="キャプション 3" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/4">
            <img alt="4" src="http://lorempixum.com/200/150/city/4" title="キャプション 4" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/5">
            <img alt="5" src="http://lorempixum.com/200/150/city/5" title="キャプション 5" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/6">
            <img alt="6" src="http://lorempixum.com/200/150/city/6" title="キャプション 6" />
        </a></li>
    </ul>
</div>
<br />
<h3>向きは"horizontal"、上部</h3>
<br />
<div id="wijgallery3" class="">
    <ul class="">
        <li class=""><a href="http://lorempixum.com/750/300/sports/1">
            <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="キャプション 1" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/2">
            <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="キャプション 2" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/3">
            <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="キャプション 3" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/4">
            <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="キャプション 4" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/5">
            <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="キャプション 5" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/6">
            <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="キャプション 6" />
        </a></li>
    </ul>
</div>
               

    このマークアップは、３つのギャラリーウィジェットのコンテンツをページに追加します。次の手順では、ギャラリーの向きを設定します。

  4. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力し、wijgallery ウィジェットを初期化して orientation オプションを設定します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
$(document).ready(function () {
    $("#wijgallery").wijgallery({
        thumbnailOrientation:"vertical",
        thumbnailDirection:"before",
        thumbsDisplay: 3,
        thumbsLength: 150,       
        showCounter:false,
        showTimer:false,
    });
    $("#wijgallery1").wijgallery({
        thumbnailOrientation:"vertical",
        thumbsDisplay: 3,
        showCounter:false,
        thumbsLength: 150,   
        showTimer:false
    });
    $("#wijgallery3").wijgallery({
        thumbnailDirection:"before",
        showCounter:false,
        showTimer:false
    });
});
</script>
<style type="text/css">
wijmo-wijcarousel-text span
{
    padding:5px;
}
#wijgallery, #wijgallery1
{
    width:750px;
    height:240px;
}
#wijgallery3
{
    width:750px;
    height:411px;
}
</style>

    ２つのギャラリーが縦向きに表示され、１つのギャラリーが横向きに表示されます（デフォルト）。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、２つのギャラリーが縦向きに（１つがサムネイル画像付きで左側に、１つがサムネイル画像付きで右側に）表示され、１つのギャラリーが横向きに表示されることを確認します。

関連トピック
ギャラリーのページャの設定

 

 

Copyright © GrapeCity inc. All rights reserved.