Widgets > wijlightbox > Autoplay the Lightbox |
The wijlightbox widget supports autoplaying. Simply set the autoPlay option to take advantage of this feature. Complete the following steps:
<body>
tags of the page, just after @RenderBody():
<div id="lightbox">
<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="Sports 1" /></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="Sports 2" /></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="Sports 3" /></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="Sports 4" /></a>
</div>
This markup will add content for a lightbox widget to the page. In the next step, you'll initialize the lightbox.
</style>
tag you added in the previous step, add the following jQuery script to initialize the wijlightbox widget:
<script type="text/javascript">
$(function () {
$("#lightbox").wijlightbox({
showNavButtons: false,
autoPlay: true
});
});
</script>
This will initialize the lightbox and autoplay the lightbox at run time.
What You've Accomplished
Press F5 to run the application and click a thumbnail image to view a larger image. The images will begin playing automatically.