ComponentOne Extender Controls for ASP.NET Web Forms
Wijmo Control Toolkit Extender Controls / C1LightBoxExtender / Adding Keyboard Navigation
In This Topic
    Adding Keyboard Navigation
    In This Topic

    The C1LightBoxExtender extender supports keyboard navigation to improve accessibility. In this example, you'll set the KeyNav property to True to add keyboard navigation to your application.

    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.C1LightBox" TagPrefix="LightBox" %>

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

    1. Add the following markup within the main <div> tag to add a Panel with content:

    <asp:Panel ID="Panel1" runat="server">

        <a href="http://lorempixum.com/600/400/sports/1" rel="wijlightbox[stock];player=img">

            <img src="http://lorempixum.com/120/90/sports/1"  title="Grass Field" alt="Grass Field with a car in the background" /></a>

        <a href="http://lorempixum.com/600/400/sports/2" rel="wijlightbox[stock];player=img">

            <img src="http://lorempixum.com/120/90/sports/2"  title="Mountains" alt="Mountains and a blue cloudy sky" /></a>

        <a href="http://lorempixum.com/600/400/sports/3"  rel="wijlightbox[stock];player=img">

            <img src="http://lorempixum.com/120/90/sports/3" title="Bridge" alt="Bridge with mountains" /></a>

        <a href="http://lorempixum.com/600/400/sports/4" rel="wijlightbox[stock];player=img">

            <img src="http://lorempixum.com/120/90/sports/4"  title="Building" alt="Building with interesting architecture" /></a>

    </asp:Panel>

    1. The above markup adds links to images to the panel's content.
    2. Add the following markup just below the Panel markup to set the lightbox extender:

    <LightBox:C1LightBoxExtender ID="Panel1_C1LightBoxExtender" runat="server" TargetControlID="Panel1" Player="Img" TextPosition="TitleOverlay" KeyNav="true">

    </LightBox:C1LightBoxExtender>

    Note that you set the KeyNav property to True.

    What You've Accomplished

    Press F5 to run your application,  click an image, and try some of the following keys to navigate through the images: