ComponentOne Studio MVC4 Classic ヘルプ
ギャラリーへのアニメーションの適用
MVC Classic ウィジェット > Wijgallery > ギャラリーへのアニメーションの適用

wijgallery ウィジェットはアニメーションをサポートします。この機能を利用するには、単に animated オプションを設定します。Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Animation）にアクセスし、MVC コントロールエクスプローラの Gallery > Animation サンプルのライブデモをご覧ください。

  1. ASP.NET MVC 4 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <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="キャプション１" />
        </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>
        <li class=""><a 
href="http://lorempixum.com/750/300/sports/7">
    <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="キャプション７" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/8">
    <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="キャプション８" />
        </a></li>
<li class=""><a href="http://lorempixum.com/750/300/sports/9">
    <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="キャプション９" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/10">
    <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="キャプション 10" />
        </a></li>
    </ul>
</div>

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

  4. 前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加して animated オプションを設定します。
    ソースビュー
    コードのコピー 
    <div class="option-row">
    <label for="showingEffectTypes">
        Transition
    </label>
    <select id="showEffectTypes" name="effects">
        <option value="blind">Blind</option>
        <option value="clip">Clip</option>
        <option value="drop">Drop</option>
        <option value="explode">Explode</option>
        <option value="fade">Fade</option>
        <option value="fold">Fold</option>
        <option value="highlight">Highlight</option>
        <option value="puff">Puff</option>
        <option value="scale">Scale</option>
        <option value="size">Size</option>
        <option value="slide">Slide</option>
    </select>
</div>

    これにより wijgallery のアニメーションをカスタマイズする要素が追加されます。実行時に、アニメーションスタイルを選択できます。スタイルを適用すると、〈前へ〉または〈次へ〉ボタンを使用して画像をナビゲートし、選択したアニメーションを表示できます。

  5. 前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加してスタイルのオプションを設定します。
    ソースビュー
    コードのコピー 
    <style type="text/css">
    .wijmo-wijcarousel-text span
    {
    padding:5px;
    }        
    #wijgallery
    {
    width:750px;
    }
</style>

    これにより wijgallery ウィジェットのサイズが設定されます。

  6. 前の手順で追加した </style> 終了タグの後に、以下の jQuery スクリプトを入力して wijgallery ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
    $("#wijgallery").wijgallery({
        thumbsLength: 120
    });
    var transitions = {
        animated:"fade",
        duration: 1000,
        easing:null
    }
    $('#showEffectTypes').change(function () {
        var ee = $("#showEffectTypes option:selected").val();
        $.extend(transitions, { animated:ee });
        $("#wijgallery").wijgallery("option", "transitions", transitions);
    });
    });
</script>

    これによりギャラリーが初期化され、アニメーションが追加されます。

このトピックの作業結果

[F5］を押してアプリケーションを実行し、ドロップダウンボックスからアニメーションスタイルを選択します。スタイルを適用すると、〈前へ〉または〈次へ〉ボタンを使用して画像をナビゲートし、選択したアニメーションを表示できます。

関連トピック
ギャラリーの向きの設定

 

 

Copyright © GrapeCity inc. All rights reserved.