Rotator - Image Gallery

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

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 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" 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" />
    <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="ShowImage">
                        <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>

Find Assistance

Help Us Improve

Was this example helpful?