再生および一時停止機能を wijlightbox ウィジェットに追加できます。ctrlButtons オプションを使用して、〈一時停止〉および〈再生〉ボタンを有効にできます。

一時停止および再生機能を有効にするには、以下の手順を実行します。

1. ASP.NET MVC 4 Wijmo アプリケーション を作成します。
2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
3. 以下のマークアップを、@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/600/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/600/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/400/sports/4" rel="wijlightbox[stock];player=img"< <img src="http://lorempixum.com/150/125/sports/4" title="スポーツ４" alt="スポーツ４" /></a> </div>

   このマークアップは、４種類の画像を含む１つのライトボックスウィジェットをページに追加します。次の手順では、ライトボックスを初期化します。

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

   ソースビュー	コードのコピー
   <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ showTimer:true, ctrlButtons:'play|stop', loop:false }); }); </script>

   上記のスクリプトはライトボックスを初期化し、〈Play〉および〈Pause〉ボタンを追加します。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、サムネイル画像をクリックしてフルサイズの画像を表示します。画像の自動再生が開始されたら、画像の右上端にある〈Pause〉および〈Play〉ボタンをクリックして画像全体に一時停止と再生を繰り返します。

Copyright © GrapeCity inc. All rights reserved.