wijlightbox ウィジェットでは、画像を現在のページ上にオーバーレイできます。これは、画像を強調表示したり画像にフォーカスを移動するための簡単な方法です。wijlightbox をカスタマイズすると、画像の自動再生、フラッシュビデオの再生、アニメーション化した遷移の表示などが可能です。
wijlightbox は、次のように、１つ以上の画像で起動できます。
| ソースビュー |
コードのコピー
|
|---|---|
<div id="lightbox">
<a href="http://lorempixum.com/600/400/sports/1" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/200/150/sports/1" title="スポーツ1" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a>
<a href="http://lorempixum.com/600/400/sports/2" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/200/150/sports/2" title="スポーツ2" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a>
<a href="http://lorempixum.com/600/400/sports/3" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/200/150/sports/3" title="スポーツ3" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a>
<a href="http://lorempixum.com/600/400/sports/4" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/200/150/sports/4" title="スポーツ4" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " /></a>
</div>
|
|
次のスクリプトは wijlightbox ウィジェットを初期化します。
| ソースビュー |
コードのコピー
|
|---|---|
<script type="text/javascript">
$(function () {
$("#lightbox").wijlightbox({modal: true});
});
</script>
|
|
ここで取り上げたマークアップとスクリプトは、次のような結果になります。
関連項目：
wijlightbox の詳細については、Wijmo 製品マニュアルをご覧ください。
関連トピック