The C1GalleryExtender can display transition animation effects when the user moves from one gallery item to the next. In this example you'll add a gallery control and a drop-down box 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.C1Gallery" TagPrefix="Gallery" %>

4. Note that you may need to edit the above depending on the assembly you are using.
5. And add the following markup within the main <div> tag to add a Panel with content and set the gallery extender:

<asp:Panel ID="gallery" runat="server" Font-Overline="False" Title="Overview" Width="750" Height="256">

    <ul class="">

    <li class=""><a href="http://lorempixum.com/750/300/sports/1">

        <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word Caption 1" />

    </a></li>

    <li class=""><a href="http://lorempixum.com/750/300/sports/2">

        <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word Caption 2" />

    </a></li>

    <li class=""><a href="http://lorempixum.com/750/300/sports/3">

        <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word Caption 3" />

    </a></li>

    <li class=""><a href="http://lorempixum.com/750/300/sports/4">

        <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word Caption 4" />

    </a></li>

    <li class=""><a href="http://lorempixum.com/750/300/sports/5">

        <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word Caption 5" />

    </a></li>

    <li class=""><a href="http://lorempixum.com/750/300/sports/6">

        <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word Caption 6" />

    </a></li>

    </ul>

</asp:Panel>

<Gallery:C1GalleryExtender runat="server" ID="Gallery1" ShowTimer="True" ThumbnailOrientation="Vertical" ThumbsDisplay="3" ShowPager="false" TargetControlID="gallery">

        <Transitions>

            <Animated Disabled="false" Effect="slide" />

        </Transitions>

</Gallery:C1GalleryExtender>

Notice that the Transitions tags in the gallery widget that allow setting transition effects or disable these transitions.

6. Add the following markup just below the gallery markup to add a drop-down list with animation options:

<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>

7. Add the following script to the page to initialize the gallery and the drop-down box:

<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 });

            $("#<%=gallery.ClientID%>").wijgallery("option", "transitions", transitions);

        });

    });

</script>

What You've Accomplished

Press F5 to run your application,  select an option from the Animation drop-down boxes, and click a thumbnail image to view how the transition animation appears. Try other animation types.