2. メイン画像の下にあるサムネイル画像の１つを押して、別の画像に移動します。
3. 左右の矢印を押して、前または次の画像に移動します。
4. 右上隅の〈Play〉ボタンを押して、画像をスライドショーで再生します。
このチュートリアルでは、wijgallery ウィジェットをアプリケーションに追加し、ウィジェットを初期化して、実 行時のウィジェットを観察しました。
Wijgallery タスク別ヘルプ
<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］を押してアプリケーションを実行し、ドロップダウンボックスからアニメーションスタイルを選択します。
スタイルを適用すると、〈前へ〉または〈次へ〉ボタンを使用して画像をナビゲートし、選択したアニメーションを 表示できます。