Wijmo UI for the Web
マークアップとスクリプティング
| Wijmo ユーザーガイド > ウィジェット > LightBox > マークアップとスクリプティング |
wijLightBox ウィジェットの HTML マークアップは次のようになります。
| マークアップ |
コードのコピー |
|---|---|
<div id="lightbox1" class=""> <a href="Images/sports1.png" rel="wijlightbox[stock];player=img"> <img src="Images/sports1.png" title="Sports 1" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href="Images/sports2.png" rel="wijlightbox[stock];player=img"> <img src="Images/sports2.png" title="Sports 2" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href="Images/sports3.png" rel="wijlightbox[stock];player=img"> <img src="Images/sports3.png" title="Sports 3" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href="Images/sports4.png" rel="wijlightbox[stock];player=img"> <img src="Images/sports4.png" title="Sports 4" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " /></a> </div> | |
次の jQuery スクリプトでウィジェットを初期化できます。
| スクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijlightbox"], function () { $(document).ready(function () { $("#lightbox1").wijlightbox({ modal: true }); }); }); </script> | |
ここで説明しているマークアップとスクリプトの結果は次のようになります。 LightBox 内の画像をクリックすると、動作が表示されます。