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

Image Gallery

Resize image:
Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image

This example demonstrates RadListView integrated with RadSlider, RadWindow and RadRotator. The images displayed by the ListView can be resized with the Slider and depending on the number of displayed items, a pager appears. RadWindow is used to display the images in full size and RadRotator allows the user to cycle between images.

  • defaultcs.aspx
    • defaultcs.aspx
    • windowcs.aspx
  • DataProvider.cs
    • DataProvider.cs
    • defaultcs.aspx.cs
    • windowcs.aspx.cs
  • srcipts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="defaultcs.aspx.cs" Inherits="ImageGalleryCS" %>

<%@ Import Namespace="Data" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" type="text/css" />
    <script src="srcipts.js" type="text/javascript"></script>
</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">
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" MinDisplayTime="200" />
        <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" ID="RadFormDecorator1" DecoratedControls="All" EnableRoundedCorners="false" DecorationZoneID="list" />
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadListView runat="server" ID="RadListView1" DataSourceID="ObjectDataSource1"
                AllowPaging="true" PageSize="10" DataKeyNames="Id" OverrideDataSourceControlSorting="true">
                <LayoutTemplate>
                  <div id="list">
                        <asp:Panel runat="server" ID="Panel1" CssClass="buttonsWrapper" Visible="<%#Container.PageCount > 1 %>">
                            <asp:Button runat="server" ID="PrevButton" CommandName="Page" CommandArgument="Prev"
                                Text="Prev Page" Enabled="<%#Container.CurrentPageIndex > 0 %>" />
                            <asp:Button runat="server" ID="NextButton" CommandName="Page" CommandArgument="Next"
                                Text="Next Page" Enabled="<%#Container.CurrentPageIndex < Container.PageCount - 1 %>" />
                        </asp:Panel>
                        <div class="sliderWrapper">
                            <span class="buttonsWrapper">Resize image:</span>
                            <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" MaximumValue="3" MinimumValue="1" CssClass="buttonsWrapper" Skin="Silk"
                                Value="2" LiveDrag="false" SmallChange="1" AutoPostBack="true" OnValueChanged="RadSlider1_ValueChanged"
                                Width="150px" CausesValidation="false" />
                        </div>
                        <div class="clearFix">
                        </div>
                        <asp:Panel ID="itemPlaceholder" runat="server">
                        </asp:Panel>
                        <div class="clearFix">
                        </div>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="imageContainer" onmouseover="containerMouseover(this)" onmouseout="containerMouseout(this)">
                        <telerik:RadBinaryImage CssClass="image" runat="server" ID="RadBinaryImage1"
                            DataValue='<%#Eval("Data") %>' Height='<%#ImageHeight %>' Width="<%#ImageWidth %>"
                            ResizeMode="Fit" onclick="<%#CreateWindowScript((Photo) Container.DataItem) %>"
                            AlternateText="Click to view larger image" ToolTip="Click to view larger image" />
                        <div style="margin-top: -30px; position: absolute; display: none; width: <%#ImageHeight.Value/1.5 %>px;">
                            <asp:TextBox runat="server" ID="TextBox1" Text='<%#Bind("Name") %>' CssClass="txt"
                                OnTextChanged="TextBox1_TextChanged" AutoPostBack="true" ToolTip="Edit image name" />
                        </div>
                    </div>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <div class="imageContainer" onmouseover="containerMouseover(this)" onmouseout="containerMouseout(this)">
                        <telerik:RadBinaryImage CssClass="image" runat="server" ID="RadBinaryImage1"
                            DataValue='<%#Eval("Data") %>' Height='<%#ImageHeight %>' Width="<%#ImageWidth %>"
                            ResizeMode="Fit" onclick="<%#CreateWindowScript((Photo) Container.DataItem) %>"
                            AlternateText="Click to view larger image" ToolTip="Click to view larger image" />
                        <div style="margin-top: -30px; position: absolute; display: none; width: <%#ImageHeight.Value/1.5 %>px;">
                            <asp:TextBox runat="server" ID="TextBox1" Text='<%#Bind("Name") %>' CssClass="txt"
                                OnTextChanged="TextBox1_TextChanged" AutoPostBack="true" ToolTip="Edit image name" />
                        </div>
                    </div>
                </AlternatingItemTemplate>
            </telerik:RadListView>
        </telerik:RadAjaxPanel>
        <asp:ObjectDataSource runat="server" ID="ObjectDataSource1" SelectMethod="GetData"
            TypeName="Data.DataProvider"></asp:ObjectDataSource>
        <telerik:RadWindowManager RenderMode="Lightweight" runat="server" ID="RadWindowManager1">
            <Windows>
                <telerik:RadWindow RenderMode="Lightweight" runat="server" ID="Details" VisibleStatusbar="false" NavigateUrl="windowcs.aspx"
                    Width="675px" Height="530px" AutoSize="false" Behaviors="Close,Move" ShowContentDuringLoad="false"
                    Modal="true">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance