By default, the C1GalleryExtender is displayed horizontally with thumbnail images appearing below the currently selected gallery image. You can customize the orientation of the thumbnail images with the ThumbnailOrientation and ThumbnailDirection properties. In this example you'll add a gallery control and two drop-down boxes that can be used to set the thumbnail orientation 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" %>

Note that you may need to edit the above depending on the assembly you are using.

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

    </ul>

</asp:Panel>

<Gallery:C1GalleryExtender runat="server" ID="GalleryExtender1" ThumbnailDirection="After" ShowControlsOnHover="false" ThumbsDisplay="3" ThumbsLength="120" ThumbnailOrientation="Vertical" TargetControlID="gallery">

</Gallery:C1GalleryExtender>

Orientation:&nbsp;&nbsp;&nbsp;

<asp:DropDownList ID="OrientationDDL" runat="server">

    <asp:ListItem>Vertical</asp:ListItem>

    <asp:ListItem>Horizontal</asp:ListItem>

</asp:DropDownList>

<br />

Direction:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:DropDownList ID="DirectionDDL" runat="server">

    <asp:ListItem>After</asp:ListItem>

    <asp:ListItem>Before</asp:ListItem>

</asp:DropDownList>

<br />

<asp:Button ID="ApplyBt" runat="server" Text="Apply" OnClick="ApplyBt_Click" />

These buttons will be used to set the expand direction at run time.

5. Select View | Code to switch to Code view and add the following import statement to the top of the page:

6. Add the following code in the main class on the page:

Note that the ThumbnailOrientation property determines the orientation of the thumbnails (Horizontal or Vertical) and the ThumbnailDirection property determines the position of the thumbnails (Before or After the selected image).

What You've Accomplished

Press F5 to run your application,  select different values from the Orientation and Direction drop-down boxes, and click Apply. You can view how different orientation and thumbnail directions appear.