wijlightbox ウィジェットはオートプレイをサポートします。この機能を利用するには、単に autoPlay オプションを設定します。以下の手順を実行します。
- 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/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>
このマークアップは、ライトボックスウィジェットのコンテンツをページに追加します。次の手順では、ライトボックスを初期化します。
- 前の手順で追加した
</style>終了タグの後に、以下の jQuery スクリプトを入力して wijlightbox ウィジェットを初期化します。ソースビュー コードのコピー<script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ showNavButtons:false, autoPlay:true }); }); </script>これによりライトボックスが初期化され、実行時にライトボックスのオートプレイが行われます。
このトピックの作業結果
［F5］を押してアプリケーションを実行し、サムネイル画像をクリックしてより大きな画像を表示します。画像の再生が自動的に開始されます。
関連トピック