The C1LightBoxExtender can display transition animation effects when the user moves from one lightbox item to the next. In this example you'll add a lightbox control and two drop-down boxes that can be used to set the transition animation at run time.

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 and set the lightbox extender:

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

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

        <img src="http://lorempixum.com/120/90/abstract/1" title="abstract 1" alt="abstract 1" /></a>

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

        <img src="http://lorempixum.com/120/90/abstract/2" title="abstract 2" alt="abstract 2" /></a>

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

        <img src="http://lorempixum.com/120/90/abstract/3" title="abstract 3" alt="abstract 3" /></a>

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

        <img src="http://lorempixum.com/120/90/abstract/4" title="abstract 4" alt="abstract 4" /></a>

</asp:Panel>

<LightBox:C1LightBoxExtender ID="Panel1_C1LightBoxExtender" runat="server" TargetControlID="Panel1" Player="Img" TextPosition="TitleOverlay">

</LightBox:C1LightBoxExtender>

5. Add the following markup just below the lightbox markup to add two drop-down boxes with animation options:

<label>Animation</label><select id="animation" class='option'>

    <option value="fade" selected='true'>fade</option>

    <option value="slide">slide</option>

    <option value="none">none</option>

</select>              

<label>Slide Direction</label><select id="direction" class='option'>

    <option value="horizontal" selected='true'>horizontal</option>

    <option value="vertical">vertical</option>

</select>

Add the following script to the page to initialize the lightbox and the drop-down boxes:

<script type="text/javascript">

    $(function () {

        $('.option').change(function () {

            $("#<%=Panel1.ClientID%>").wijlightbox('option', {

                transAnimation: { animated: $('#animation').val() },

                slideDirection: $('#direction').val()

            });

        });

    });

</script>

You can change the animation style by setting the TransAnimation.Animated property to "None", "Slide", or "Fade".  TransAnimation.Easing determines the easing style to animate. TransAnimation.Duration determines the time span to animate. For the slide animation, you can also change the slide direction by setting the SlideDirection property to "Horizontal" or "Vertical".

What You've Accomplished

Press F5 to run your application,  select an options from the Animation and Slide Direction drop-down boxes, and click a thumbnail image, click the Next or Previous button in the displayed image to view how the transition animation appears.