Add Keyboard Navigation

You can improve the accessibility of the wijlightbox widget by enabling keyboard navigation. You can enable keyboard navigation by using keyNav option.

Complete the following steps to enable keyboard navigation:

Create a new ASP.NET MVC 5 Wijmo Application (see Creating an MVC Tools Project).
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div id="lightbox">
    <a href="http://lorempixum.com/600/400/sports/1" rel="wijlightbox[stock];player=img">
        <img src="http://lorempixum.com/150/125/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/150/125/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/150/125/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/150/125/sports/4"  title="Building" alt="Building with interesting architecture" /></a>
</div>

This markup will add one lightbox widget with four images to the page. In the next step, you'll initialize the lightbox.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijlightbox widget:
```
<script type="text/javascript">
    $(function () {
        $("#lightbox").wijlightbox({
            textPosition: 'titleOverlay',
            keyNav: true
        }).focus();
    });
</script>
</head>
```
The above script initializes the lightbox and enables the keyboard navigation.

What You've Accomplished

Press F5 to run the application and click a thumbnail image to open the full image. Try clicking the LEFT, RIGHT, UP, and DOWN arrow keys and the HOME and NEXT keys to navigate through the images.