サイズ変更アニメーションの設定

wijlightbox ウィジェットは、さまざまなサイズの画像を、ある画像から次の画像に移動するときのさまざまな遷移効果を表示できます。

ライトボックスのサイズ変更アニメーションを設定するには、以下の手順を実行します。

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

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

ソースビュー	コードのコピー
<div id="lightbox"> <a href="http://lorempixum.com/600/400/sports/1" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/sports/1" title="スポーツ1" alt="スポーツ1" /></a> <a href="http://lorempixum.com/800/400/sports/2" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/sports/2" title="スポーツ2" alt="スポーツ2" /></a> <a href="http://lorempixum.com/300/400/sports/3" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/sports/3" title="スポーツ3" alt="スポーツ3" /></a> <a href="http://lorempixum.com/600/300/sports/4" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/sports/4" title="スポーツ４" alt="スポーツ４" /></a> </div> <div class="demo-options"> <br /><label>アニメーション</label><br /><select id="animation" class='option'> <option value="sync" selected='true'>Sync</option> <option value="wh">Width To Height</option> <option value="hw">Height To Width</option> <option value="none">None</option> </select> </div>

ソースビュー

コードのコピー

<div id="lightbox">
<a href="http://lorempixum.com/600/400/sports/1" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/sports/1" title="スポーツ1" alt="スポーツ1" /></a> 
<a href="http://lorempixum.com/800/400/sports/2" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/sports/2" title="スポーツ2" alt="スポーツ2" /></a> 
<a href="http://lorempixum.com/300/400/sports/3" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/sports/3" title="スポーツ3" alt="スポーツ3" /></a> 
<a href="http://lorempixum.com/600/300/sports/4" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/sports/4" title="スポーツ４" alt="スポーツ４" /></a>
</div>
<div class="demo-options">
<br /><label>アニメーション</label><br /><select id="animation" class='option'>
<option value="sync" selected='true'>Sync</option>
<option value="wh">Width To Height</option>
<option value="hw">Height To Width</option>
<option value="none">None</option>
</select>
</div>

このマークアップは、４つの画像を含むライトボックスウィジェットと４つのオプションをもつドロップダウンボックスをページに追加します。次の手順では、ライトボックスを初期化して設定します。

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

ソースビュー	コードのコピー
<script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ textPosition:'titleOverlay', autoSize:true, keyNav:true, transAnimation:{ animated:'fade'} }); $('.option').change(function () { $("#lightbox").wijlightbox('option', { resizeAnimation:{ animated: $('#animation').val() } }); }); }); </script>

ソースビュー

コードのコピー

<script type="text/javascript">
$(function () {
$("#lightbox").wijlightbox({
textPosition:'titleOverlay',
autoSize:true,
keyNav:true,
transAnimation:{ animated:'fade'}
});
$('.option').change(function () {
$("#lightbox").wijlightbox('option', { 
resizeAnimation:{ animated:
$('#animation').val() }
});
});
});
</script>

実行時に、ドロップダウンボックスから選択したオプションによって wijlightbox ウィジェットのサイズ変更アニメーションが設定されます。

このトピックの作業結果

［F5］を押して、アプリケーションを実行し、サムネイル画像をクリックします。画像がライトボックスに表示されます。選択した画像はサイズが異なるので、〈次へ〉または〈前へ〉ボタンをクリックするとサイズ変更アニメーションの効果がわかります。ドロップダウンリストから別の項目を選択して効果を変更してください。