The HTML markup for a wijLightBox widget looks like this.
Drop down to view markup
| Markup |
Copy Code
|
<div id="lightbox1" class="">
<a href="http://lorempixum.com/600/400/sports/1" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/sports/1" title="Sports 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/150/125/sports/2" title="Sports 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/150/125/sports/3" title="Sports 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/150/125/sports/4" title="Sports 4"
alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " /></a>
</div> |
You can initialize the widget with the following jQuery script.
Drop down to view script
| Script |
Copy Code
|
<script id="scriptInit" type="text/javascript">
$(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.
See Also
