If you choose, you can add a pager to the Gallery to provide additional navigation options. The pager allows uses to move from one item to another quickly. Set the ShowPager option to determine if a pager is displayed.

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. Add the following markup within the main <div> tag to add a Panel with content:

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

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

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

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

    </a></li>

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

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

    </a></li>

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

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

    </a></li>

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

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

    </a></li>

    </ul>

</asp:Panel>

The above markup adds ten images to the gallery.

5. Add the following markup just below the Panel markup to set the gallery extender:

<Gallery:C1GalleryExtender runat="server" ID="GalleryExtender1" ShowControlsOnHover="false" ShowPager="true" ThumbsDisplay="3" ThumbsLength="120" TargetControlID="gallery">

</Gallery:C1GalleryExtender>

The ShowPager option is set to True so a pager will be displayed at run time.

What You've Accomplished

Press F5 to run your application and notice that a pager is included under the gallery. Choose a number in the pager to view the image associated with that number.