ギャラリーの向きの設定

duration: 1000, easing:null }

$('#showEffectTypes').change(function () {

var ee = $("#showEffectTypes option:selected").val();

$.extend(transitions, { animated:ee });

$("#wijgallery").wijgallery("option", "transitions", transitions);

});

</script>

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

このトピックの作業結果

［F5］を押してアプリケーションを実行し、ドロップダウンボックスからアニメーションスタイルを選択します。

スタイルを適用すると、〈前へ〉または〈次へ〉ボタンを使用して画像をナビゲートし、選択したアニメーションを表示できます。

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</ul>

</div>

<br />

<h3>向きは "vertical"、右側</h3>

<br />

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</ul>

</div>

<br />

<h3>向きは"horizontal"、上部</h3>

<br />

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</ul>

</div>

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

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

$(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>

.wijmo-wijcarousel-text span {

padding:5px;

}

#wijgallery, #wijgallery1 {

width:750px;

height:240px;

}

#wijgallery3 {

width:750px;

height:411px;

}

</style>

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

このトピックの作業結果

［F5］を押してアプリケーションを実行し、２つのギャラリーが縦向きに（１つがサムネイル画像付きで左側に、

１つがサムネイル画像付きで右側に）表示され、１つのギャラリーが横向きに表示されることを確認します。

ドキュメント内 MVC Tools (ページ 183-187)