Add Play and Pause Buttons

You can add play and pause capability to the wijlightbox widget. You can enable pause and play buttons by using the ctrlButtons option.

Complete the following steps to add pause and play:

Create a new C1 ASP.NET MVC 5 Web Application (see Creating an MVC Classic Project).
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <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 one lightbox widget with four images to the page. In the next step, you'll initialize the lightbox.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijlightbox widget:

<script type="text/javascript">
    $(function () {
        $("#lightbox").wijlightbox({
            showTimer: true,
            ctrlButtons: 'play|stop',
            loop: false
        });
    });
</script>

The above script initializes the lightbox and adds play and pause buttons.

What You've Accomplished

Press F5 to run the application and click a thumbnail image to open the full image. The images will begin to play automatically, click the Pause and Play buttons in the upper right-hand corner of the image to pause or play cycling through the images.