New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Modes

  • 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
  • Change Modes
DisplayArea Mode


This demo illustrates the different DisplayArea and ThumbnailsArea Modes that the RadImageGallery control provides.
Below you can find a list of the DisplayArea Modes that could be set:
  • Image -This is the default mode when the ThumbnailsArea and the ImageArea are simultaneously visible.
  • Thumbnails -The area initially shows only thumbnail images and upon click it hides the thumbnails and shows the ImageArea with close button on the top right in order to give the possibility to go back to the Thumbnails.
  • LightBox -Render only a ThumbnailsArea and on click opens a LightBox control.
  • ToolTip- Render only a ThumbnailsArea and on click opens a ToolTip control.
Note that ThumbnailsArea Mode different than Thumbnails could be set only in case the DisplayArea Mode is set to Image. Here is the list of ThumbnailsArea modes available:
  • Thumbnails - Available for all DisplayArea modes.
  • ImageSlider -Available only for Image DisplayArea mode.
  • ImageSliderPreview -Available only for Image DisplayArea mode.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ImageGalleryExamples.Functionality.Modes.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<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" />
    <div class="demo-container size-medium">
        <asp:Panel ID="galleriesPanel" runat="server">
            <telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery1" DisplayAreaMode="Image"
                Width="600px" Visible="false" ImagesFolderPath="~/Image-Gallery/Examples/Functionality/Modes/images">
                <ImageAreaSettings Height="500px" />
            </telerik:RadImageGallery>
            <telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery2" DisplayAreaMode="Thumbnails" Width="600px"
                Visible="true" ImagesFolderPath="~/Image-Gallery/Examples/Functionality/Modes/images">
                <ImageAreaSettings Height="500px" />
                <ThumbnailsAreaSettings Height="500" ShowScrollButtons="false" />
            </telerik:RadImageGallery>
            <telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery3" DisplayAreaMode="ToolTip" Width="600px"
                Visible="false" ImagesFolderPath="~/Image-Gallery/Examples/Functionality/Modes/images">
                <ImageAreaSettings Height="500px" />
                <ThumbnailsAreaSettings />
            </telerik:RadImageGallery>
            <telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery4" DisplayAreaMode="LightBox" Width="600px"
                Visible="false" ImagesFolderPath="~/Image-Gallery/Examples/Functionality/Modes/images">
                <ImageAreaSettings Height="600px" />
                <ThumbnailsAreaSettings ThumbnailsSpacing="1px" Height="304" ShowScrollbar="true"
                    ShowScrollButtons="false" />
            </telerik:RadImageGallery>
        </asp:Panel>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelRenderMode="Block">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel" />
                    <telerik:AjaxUpdatedControl ControlID="galleriesPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel">
        <Views>
            <qsf:View Title="Change Modes">
                <qsf:ConfiguratorColumn runat="server" Title="DisplayArea Mode" Size="Medium">
                    <qsf:RadioButtonList ID="DisplayAreaModeSettings" runat="server" OnSelectedIndexChanged="DisplayAreaModeSettings_SelectedIndexChanged"
                        AutoPostBack="true">
                        <asp:ListItem Text="Image" Value="Image" />
                        <asp:ListItem Text="Thumbnails" Value="Thumbnails" Selected="true" />
                        <asp:ListItem Text="LightBox" Value="LightBox" />
                        <asp:ListItem Text="ToolTip" Value="ToolTip" />
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Thumbnails Area Mode:" ID="ThumbnailAreaSettings" Size="Medium" Visible="false">
                    <qsf:RadioButtonList ID="ThumbnailsAreaModeSettings" runat="server" AutoPostBack="true"
                        OnSelectedIndexChanged="ThumbnailsAreaModeSettings_SelectedIndexChanged">
                        <asp:ListItem Text="Thumbnails" Value="Thumbnails" Selected="True" />
                        <asp:ListItem Text="ImageSlider" Value="ImageSlider" />
                        <asp:ListItem Text="ImageSliderPreview" Value="ImageSliderPreview" />
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance