The wijlightbox widget allows you to overlay images on the current page. It is a simple way to highlight, or give focus to, an image. You can customize the wijlightbox to autoplay through images, play flash videos, show animated transitions, and more.
A wijlightbox may start with one or multiple images, like this:
<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="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/200/150/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/200/150/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/200/150/sports/4" title="Sports 4" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " /></a>
</div>
The following script initializes the wijlightbox widget:
<script type="text/javascript">
$(function () {
$("#lightbox").wijlightbox({modal: true});
});
</script>
The markup and script featured here results in the following:
For more information about wijlightbox, click one of the following external links to view our Wijmo wiki documentation:
See Also