The C1LightBoxExtender extender includes options to add Play/Pause and Stop buttons to the control. This gives users the option to play through the images like a slideshow. This example shows how to set the CtrlButtons property to determine the visibility of control buttons.

Complete the following steps:

1. Create a new ASP.NET Web application.
2. In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
3. Switch to Source view, and add the following markup at the top of the page to register the assembly:

<%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1LightBox" TagPrefix="LightBox" %>

Note that you may need to edit the above depending on the assembly you are using.

4. Add the following markup within the main <div> tag to add a Panel with content:

<asp:Panel ID="Panel1" runat="server">

    <a href="http://lorempixum.com/600/400/sports/1" rel="wijlightbox[stock];player=img">

        <img src="http://lorempixum.com/120/90/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/120/90/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/120/90/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/120/90/sports/4" title="Sports 4" alt="Sports 4" /></a>

</asp:Panel>

The above markup adds images to the lightbox.

5. Add the following markup just below the Panel markup to set the lightbox extender:

<LightBox:C1LightBoxExtender ID="Panel1_C1LightBoxExtender" runat="server" TargetControlID="Panel1" Player="Img" ShowTimer="true" CtrlButtons="Play, Stop" Loop="false">

</LightBox:C1LightBoxExtender>

The CtrlButtons option is set to "Play" and "Stop" so the images can be played like a slideshow.

What You've Accomplished

Press F5 to run your application, click an image, and notice that Play and Stop buttons appear above the upper-right corner of the image. If you click the Play button, the images will begin playing automatically. Click the Pause or Stop buttons to stop the slideshow.