ライトボックス遷移アニメーションの設定

デフォルトで、wijlightbox にはある画像から次の画像に移動する際のアニメーション化された遷移効果が組み込まれています。この効果をカスタマイズできます。この例では、transAnimation および slideDirection オプションを使用して wijlightbox ウィジェットのページを切り替える方法を示します。

ライトボックスの遷移を設定するには、以下の手順を実行します。

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

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

ソースビュー	コードのコピー
<div id="lightbox"> <a href="http://lorempixum.com/600/400/abstract/1" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/abstract/1" title="抜粋1" alt="抜粋1" /></a> <a href="http://lorempixum.com/600/400/abstract/2" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/abstract/2" title="抜粋2" alt="抜粋2" /></a> <a href="http://lorempixum.com/600/400/abstract/3" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/abstract/3" title="抜粋3" alt="抜粋3" /></a> <a href="http://lorempixum.com/600/400/abstract/4" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/abstract/4" title="抜粋４" alt="抜粋４" /></a> </div> <div class="demo-options"> <label>アニメーション</label> <select id="animation" class='option'> <option value="fade" selected='true'>fade</option> <option value="slide">slide</option> <option value="none">none</option> </select> <label>スライドの向き</label><select id="direction" class='option'> <option value="horizontal" selected='true'>horizontal</option> <option value="vertical">vertical</option> </select> </div>

ソースビュー

コードのコピー

<div id="lightbox">
<a href="http://lorempixum.com/600/400/abstract/1" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/abstract/1" title="抜粋1" alt="抜粋1" /></a>
<a href="http://lorempixum.com/600/400/abstract/2" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/abstract/2" title="抜粋2" alt="抜粋2" /></a>
<a href="http://lorempixum.com/600/400/abstract/3" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/abstract/3" title="抜粋3" alt="抜粋3" /></a>
<a href="http://lorempixum.com/600/400/abstract/4" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/abstract/4" title="抜粋４" alt="抜粋４" /></a>
</div>
<div class="demo-options">
<label>アニメーション</label>
<select id="animation" class='option'>
<option value="fade" selected='true'>fade</option>
<option value="slide">slide</option>
<option value="none">none</option>
</select> 
<label>スライドの向き</label><select id="direction" class='option'>
<option value="horizontal" selected='true'>horizontal</option>
<option value="vertical">vertical</option>
</select>
</div>

このマークアップは、４種類の画像を含む１つのライトボックスウィジェットをページに追加すると共に、実行時にアニメーションタイプとスライドの向きを選択できるように２種類のドロップダウンリストボックスを追加します。次の手順では、ライトボックスを初期化します。

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

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

ソースビュー

コードのコピー

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

slideDirection:$('#direction').val()
});

}); 
});
</script>

上記のスクリプトはライトボックスを初期化します。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、サムネイル画像をクリックしてフルサイズの画像を表示します。〈Next〉または〈Previous〉ボタンをクリックして、画像間の遷移アニメーションを確認します。ドロップダウンボックスからオプションを選択して遷移を変更します。