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

DisplayArea Mode


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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 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" />
    <div class="wrap demo-container size-medium">
        <div class="galleries">
            <asp:Panel ID="galleriesPanel" CssClass="galleries" 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>
    </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" CssClass="serverConfig">
                        <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

Help Us Improve

Was this example helpful?