You can customize your application by adding transition animation effects to the C1LightBox control. These animations appear when navigating through lightbox images when one image transitions to the next. You can change the animation style by setting the TransAnimation.Animated property with the following values:

• None - No animation.
• Slide - Slide animation.
• Fade - Fade animation.

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.

This example will show you how to set and change these animation effects at run time.

Complete the following steps:

1. In Source view, edit the <cc1:C1LightBox> markup so it appears like the following:

   <cc1:C1LightBox ID="C1LightBox1" runat="server" Player="Img" TextPosition="TitleOverlay" >
   <Items>
           <cc1:C1LightBoxItem ID="LightBoxItem1" Title="Abstract1" Text="Abstract1"
                 ImageUrl="http://lorempixum.com/120/90/abstract/1"
                 LinkUrl="http://lorempixum.com/600/400/abstract/1" />
           <cc1:C1LightBoxItem ID="LightBoxItem2" Title="Abstract2" Text="Abstract2"
                 ImageUrl="http://lorempixum.com/120/90/abstract/2"
                 LinkUrl="http://lorempixum.com/600/400/abstract/2" />
           <cc1:C1LightBoxItem ID="C1LightBoxItem3" Title="Abstract3" Text="Abstract3"
                 ImageUrl="http://lorempixum.com/120/90/abstract/3"
                 LinkUrl="http://lorempixum.com/600/400/abstract/4" />
           <cc1:C1LightBoxItem ID="C1LightBoxItem4" Title="Abstract4" Text="Abstract4"
                 ImageUrl="http://lorempixum.com/120/90/abstract/4"
                 LinkUrl="http://lorempixum.com/600/400/abstract/4" />
   </Items>
   </cc1:C1LightBox>
   

   This customizes the lightbox control and adds images to the control.

2. Add the following markup just below the lightbox markup:

   <div class="demo-options">
   <!-- Begin options markup -->
   <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>
   <!-- End options markup -->
   </div>
   

   This adds two drop-down lists, one with animation transition effects and the other slide direction.

3. Add the following markup just below the previous markup:

   <script type="text/javascript">
   $(function () {
    
           $('.option').change(function () {
                 $("#<%=C1LightBox1.ClientID%>").c1lightbox('option', {
                        transAnimation: { animated: $('#animation').val() },
                        slideDirection: $('#direction').val()
                 });
           });
   });
   </script>
   

   This script sets the animation effect and slide direction at run time.

What You've Accomplished

Run the application and at run time choose the animation effect and slide direction from the drop-down boxes. Click on an image to view it in the lightbox and then click the Previous or Next buttons in the lightbox to view the transition animation effect and slide direction you selected. You can choose another effect to view how it appears when moving between images in the lightbox.