The C1LightBox control can automatically resize according to the content image's width and height. This makes certain that  images are displayed with the correct width/height ratio. You can enable automatic resizing by setting the AutoSize property to True.

The ResizeAnimation property determines the animation effect when the container's size is changed. The ResizeAnimation.Animated property supports the following values:

• None - No animation.
• Wh - Resizes the width before the height.
• Hw - Resizes the height before the width.
• Sync - Resizes both the width and height at the same time.

Note that the automatic resizing feature only works for image content.

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" AutoSize="true" KeyNav="true">
   <Items>
           <cc1:C1LightBoxItem ID="LightBoxItem1" Title="Sport1" Text="Sport1"
                 ImageUrl="http://lorempixum.com/120/90/sports/1"
                 LinkUrl="http://lorempixum.com/600/400/sports/1" />
           <cc1:C1LightBoxItem ID="LightBoxItem2" Title="Sport2" Text="Sport2"
                 ImageUrl="http://lorempixum.com/120/90/sports/2"
                 LinkUrl="http://lorempixum.com/800/400/sports/2" />
           <cc1:C1LightBoxItem ID="C1LightBoxItem3" Title="Sport3" Text="Sport3"
                 ImageUrl="http://lorempixum.com/120/90/sports/3"
                 LinkUrl="http://lorempixum.com/300/400/sports/3" />
           <cc1:C1LightBoxItem ID="C1LightBoxItem4" Title="Sport4" Text="Sport4"
                 ImageUrl="http://lorempixum.com/120/90/sports/4"
                 LinkUrl="http://lorempixum.com/600/300/sports/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:

   <label>Animation</label>
   <select id="animation" class='option'>
   <option value="sync" selected='true'>sync</option>
   <option value="wh">wh</option>
   <option value="hw">hw</option>
   <option value="none">none</option>
   </select>
   

   This adds a drop-down list with the types of animation effects.

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

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

   This script sets the animation effect at run time.

What You've Accomplished

Run the application and at run time choose an animation effect from the drop-down box. Click on a thumbnail image to view the image in the lightbox. Click the Previous or Next button in the lightbox to view the transition animation effect you selected. You can choose another effect to view how it appears when moving between images in the lightbox.