<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.Gallery.DefaultVB"CodeFile="DefaultVB.aspx.vb" %>
<!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>
<asp:Label ID="labelImageName" runat="server"></asp:Label>
</div>
<div class="details">
<strong>Keywords:</strong>
<asp:Label ID="labelImageKeywords" runat="server"></asp:Label>
</div>
<div class="details">
<strong>Comments:</strong>
<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>
<asp:TextBox ID="textImageName" runat="server" CssClass="detailsTxtBox"></asp:TextBox>
</div>
<div class="details">
<strong>Keywords:</strong>
<asp:TextBox ID="textImageKeywords" runat="server" CssClass="detailsTxtBox"></asp:TextBox>
</div>
<div class="details">
<strong>Comments:</strong>
<asp:TextBox ID="textImageComments" runat="server" CssClass="detailsTxtBox"></asp:TextBox>
</div>
<div class="details">
<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>