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

Image Gallery

You can create image galleries easily with the RadImageGallery control without the need to configure a rotator, write event handling code and layouts.

This example demonstrates integration between RadRotator and the Ajax controls. The example also shows how to update form data on the server using Ajax requests.

Select an image from the gallery to see it and display its details. Modify the details and the rotator will be updated with the new data.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • Styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.Gallery.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="Styles.css" type="text/css" rel="stylesheet" />
    <script src="scripts.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" />
    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        You can create image galleries easily with the <a href="https://demos.telerik.com/aspnet-ajax/image-gallery/examples/overview/defaultcs.aspx" title="create an image gallery with just a few lines of markup">RadImageGallery</a> control without the need
        to configure a rotator, write event handling code and layouts.
    </qsf:MessageBox>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="thumbRotator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="imagePreview"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="detailsPanel"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="UpdateButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="detailsPanel"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="Silk" Transparency="30"
                                 EnableSkinTransparency="false" BackColor="#E0E0E0">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container no-bg">
        <table class="gallery-container">
            <tr>
                <td style="height: 22px">
                    <img src="images/White.gif" height="22" width="60" alt="" style="float: left;" />
                </td>
                <td style="height: 22px">
                    <img src="images/cornerLeftTop.gif" height="22" width="50" alt="" style="float: left;" />
                </td>
                <td style="height: 22px">
                    <img src="images/topLeft.gif" height="22" width="292" alt="" style="float: left;" />
                </td>
                <td style="height: 22px">
                    <img src="images/topRight.gif" height="22" width="280" alt="" style="float: left;" />
                </td>
                <td style="height: 22px">
                    <img src="images/cornerRightTop.gif" height="22" width="62" alt="" style="float: left;" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/whiteMiddle.gif" height="243" width="60" alt="" style="float: left;" />
                </td>
                <td>
                    <img src="images/leftFrame.gif" height="243" width="50" alt="" style="float: left;" />
                </td>
                <td class="previewPane">
                    <div style="margin-top: 20px">
                        <asp:Image ID="imagePreview" runat="server" ImageUrl="images/spacer.gif" Height="192px"
                                   Width="272px" AlternateText="preview" BorderWidth="0"></asp:Image>
                    </div>
                </td>
                <td class="infoPane">
                    <div class="infoPaneBg" runat="server" id="detailsPanel">
                        <div class="imageDetailsHeader">
                            Image details:
                        </div>
                        <div id="viewPanel">
                            <div class="details">
                                <strong>Name:</strong>&nbsp;
                                <asp:Label ID="labelImageName" runat="server"></asp:Label>
                            </div>
                            <div class="details">
                                <strong>Keywords:</strong>&nbsp;
                                <asp:Label ID="labelImageKeywords" runat="server"></asp:Label>
                            </div>
                            <div class="details">
                                <strong>Comments:</strong>&nbsp;
                                <asp:Label ID="labelImageComments" runat="server"></asp:Label>
                            </div>
                            <div class="details" style="margin-top: 5px; margin-left: 28px">
                                <a href="javascript:buttonEditClicked();">
                                    <img style="border-top-style: none; border-right-style: none; border-left-style: none;
                                         border-bottom-style: none" height="20" alt="" src="images/editBtn.gif" width="44" />
                                </a>
                            </div>
                        </div>
                        <div style="display: none" id="editPanel">
                            <div class="details">
                                <strong>Name:</strong>&nbsp;
                                <asp:TextBox ID="textImageName" runat="server" CssClass="detailsTxtBox"></asp:TextBox>
                            </div>
                            <div class="details">
                                <strong>Keywords:</strong>&nbsp;
                                <asp:TextBox ID="textImageKeywords" runat="server" CssClass="detailsTxtBox"></asp:TextBox>
                            </div>
                            <div class="details">
                                <strong>Comments:</strong>&nbsp;
                                <asp:TextBox ID="textImageComments" runat="server" CssClass="detailsTxtBox"></asp:TextBox>
                            </div>
                            <div class="details">
                                &nbsp;
                                <asp:LinkButton CssClass="editBtns" ID="UpdateButton" runat="Server" OnClick="UpdateButton_Click">OK</asp:LinkButton>
                                <a class="editBtns" href="javascript:buttonCancelClicked();">Cancel</a>
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    <img src="images/rightFrame.gif" height="243" width="62" alt="" style="float: left;" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/whiteShadow.gif" height="117" width="60" alt="" />
                </td>
                <td>
                    <img src="images/left.gif" id="img_left" height="117" width="50" alt="" style="cursor: pointer" />
                </td>
                <td colspan="2" class="thumbsViewer">
                    <telerik:RadRotator RenderMode="Lightweight" ID="thumbRotator" runat="server" Skin="Silk" RotatorType="ButtonsOver" Width="572"
                                        Height="118px" ItemHeight="118" ItemWidth="145" FrameDuration="1" ScrollDirection="Left,Right"
                                        OnItemClick="thumbRotator_ItemClick">
                        <ItemTemplate>
                            <div class="itemTemplate">
                                <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' alt='gallery image'
                                     class="RotatorImage" /><br />
                            <%#  DataBinder.Eval(Container.DataItem, "Image")%>
                            </div>
                        </ItemTemplate>
                        <ControlButtons LeftButtonID="img_left" RightButtonID="img_right"></ControlButtons>
                    </telerik:RadRotator>
                </td>
                <td>
                    <img src="images/right.gif" id="img_right" height="117" width="62" alt="" style="cursor: pointer" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance