You can customize your application by adding transition animation effects to the C1Gallery control. These animations appear when navigating through gallery images when one image transitions to the next. 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:C1Gallery> markup so it appears like the following:

   XML Code

   <cc1:C1Gallery ID="C1Gallery1" runat="server" ShowTimer="True" Width="750px" Height="256px" ThumbnailOrientation="Vertical" ThumbsDisplay="3" ShowPager="false"> <Transitions> <Animated Disabled="false" Effect="slide" /> </Transitions>
   <Items>
   <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/1" ImageUrl="http://lorempixum.com/200/150/sports/1" />
   <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/2" ImageUrl="http://lorempixum.com/200/150/sports/2" />
   <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/3" ImageUrl="http://lorempixum.com/200/150/sports/3" />
   <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/4" ImageUrl="http://lorempixum.com/200/150/sports/4" />
   <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/5" ImageUrl="http://lorempixum.com/200/150/sports/5" />
   <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/6" ImageUrl="http://lorempixum.com/200/150/sports/6" />
   </Items>
   </cc1:C1Gallery>
   

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

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

   XML Code

   <label for="showingEffectTypes"> Animation </label>
   <asp:DropDownList ID="showEffectTypes" runat="server">
   <asp:ListItem Value="blind" Selected="True">Blind</asp:ListItem>
   <asp:ListItem Value="clip">Clip</asp:ListItem>
   <asp:ListItem Value="drop">Drop</asp:ListItem>
   <asp:ListItem Value="explode">Explode</asp:ListItem>
   <asp:ListItem Value="fade">Fade</asp:ListItem>
   <asp:ListItem Value="fold">Fold</asp:ListItem>
   <asp:ListItem Value="highlight">Highlight</asp:ListItem>
   <asp:ListItem Value="puff">Puff</asp:ListItem>
   <asp:ListItem Value="pulsate">Pulsate</asp:ListItem>
   <asp:ListItem Value="scale">Scale</asp:ListItem>
   <asp:ListItem Value="size">Size</asp:ListItem>
   <asp:ListItem Value="slide">Slide</asp:ListItem>
   </asp:DropDownList>

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

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

   XML Code

   <script type="text/javascript">
   $(document).ready(function () {
   var transitions = {
   animated: "fade",
   duration: 1000,
   easing: null
   }
   $('#<%=showEffectTypes.ClientID%>').change(function () {
   var ee = $("#<%=showEffectTypes.ClientID%> option:selected").val();
   $.extend(transitions, { animated: ee });
   $("#<%=C1Gallery1.ClientID%>").c1gallery("option", "transitions", transitions);
   });
   });
   </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 the Previous or Next buttons in the gallery to view the transition animation effect you selected. You can choose another effect to view how it appears when moving between images in the gallery.