Wijmo UI for the Web
Markup And Scripting
The HTML markup for a wijLightBox widget looks like this.
| Markup |
Copy Code |
|---|---|
<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> | |
You can initialize the widget with the following jQuery script.
| Script |
Copy Code |
|---|---|
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijlightbox"], function () { $(document).ready(function () { $("#lightbox1").wijlightbox({ modal: true }); }); }); </script> | |
The markup and script featured here results in the following live widget. Click images in the LightBox to see it in action.