ImageGallery - Keyboard Support

Note

Changing the shortcuts used for accessing RadImageGallery can tally with browser shortcuts which have higher priority.

  • 1
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 2
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 3
  • 30
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The keyboard navigation feature of Telerik RadImageGallery allows you to easily change images, views or turn on/off certain features of the control. This demo illustrates the default shortcuts and actions which are performed when a certain key or a combination of keys are pressed. To enable this feature you have to set the ClientSettings -> AllowKeyboardNavigation property of the image gallery to true (it's default value is false).

The ImageGallery also features an additional property ClientSettings -> KeyboardNavigationSettings -> Shortcuts which allows you to add custom shortcuts. When a custom shortcut is assigned the default one gets disabled. In the demo custom shorcuts for Focus and ToogleFullScreen are added for the RadImageGallery, which allow you to specify the key combination that focuses the gallery and toogle full screen for the selected image.

In addition to the commands you can allow the cycling navigation functionality of the control by setting the AllowCycle property to true. This will force the control to select an image inside the ThumbnailsArea once the user tries to navigate outside of it using the arrow keys.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.ImageGalleryExamplesCSharp.AccessibilityAndInternationalization.KeyboardSupport.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="qsfInfo" runat="server" Type="Info" Title="Note">
        <div>
            <p>
                Changing the shortcuts used for accessing RadImageGallery can tally with browser
                shortcuts which have higher priority.
            </p>
        </div>
    </qsf:MessageBox>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadImageGallery1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageGallery1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageGallery1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageGallery1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageGallery1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container">
        <telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery1" DisplayAreaMode="LightBox" ImagesFolderPath="images" Height="200px" Width="700px" CssClass="galleries">
            <ThumbnailsAreaSettings Height="200px" />
            <ClientSettings AllowKeyboardNavigation="true">
            </ClientSettings>
        </telerik:RadImageGallery>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="CheckBox1" runat="server" Text="Allow Cycle" Checked="true" CssClass="checkBox"
                                AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBox1" runat="server" Width="60px" Mask="L" WrapperCssClass="maskTextBox" LabelWidth="200px"
                                Text="Y" AutoPostBack="true" OnTextChanged="RadMaskedTextBox1_TextChanged" SelectionOnFocus="SelectAll" Label="Focus Key">
                            </qsf:MaskedTextBox>
                        </li>
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBox2" runat="server" Width="60px" Mask="L" LabelWidth="200px"
                                Text="F" AutoPostBack="true" OnTextChanged="RadMaskedTextBox2_TextChanged" SelectionOnFocus="SelectAll"
                                Label="Toggle Full Screen Key">
                            </qsf:MaskedTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?