<%@ Page Language="C#" %>
<!DOCTYPE html>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<script src="scripts.js" type="text/javascript"></script>
<script type="text/javascript">
Sys.Application.add_load(function() {
$autoSizeDemo.galleryWin = $find("<%= GalleryWindow.ClientID %>");
$autoSizeDemo.previewWin = $find("<%= PreviewWindow.ClientID %>");
//get a reference to the image tag in the preview window
$autoSizeDemo.imgHolder = $get("imageHolder");
//add onload event for the image in the preview window
$addHandler($autoSizeDemo.imgHolder, "load", sizePreviewWindow);
})
</script>
<div class="demo-container no-bg" id="offsetElement">
<telerik:RadWindow RenderMode="Lightweight" ID="PreviewWindow" runat="server" VisibleStatusbar="false" VisibleTitlebar="false"
OffsetElementID="offsetElement" Top="-10" Left="310" AutoSizeBehaviors="Width, Height"
AutoSize="true" KeepInScreenBounds="false">
<ContentTemplate>
<img src="javascript:void(0);" alt="Image holder" id="imageHolder" />
</ContentTemplate>
</telerik:RadWindow>
<telerik:RadWindow RenderMode="Lightweight" ID="GalleryWindow" VisibleOnPageLoad="true" runat="server" Title="Photo Manager"
VisibleStatusbar="false" AutoSize="true" AutoSizeBehaviors="Height, Width" OffsetElementID="offsetElement"
IconUrl="~/Window/Examples/AutoSize/images/WindowIcon.gif">
<ContentTemplate>
<div style="width: 310px">
<h1 id="ThumbsTitle">Latest Tour Photos</h1>
<p id="ThumbsDescr">
Click on a thumbnail for real size preview.
</p>
<ul class="thumbPane">
<li>
<img src="Photos/thumbs/1.jpg" alt="image 1" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/3.jpg" alt="image 2" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/2.jpg" alt="image 3" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/5.jpg" alt="image 4" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/4.jpg" alt="image 5" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/6.jpg" alt="image 6" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/7.jpg" alt="image 7" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/10.jpg" alt="image 8" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/8.jpg" alt="image 9" onclick="openWin(this); return false;" />
</li>
</ul>
<div id="hiddenPane" style="display: none">
<ul class="thumbPane">
<li>
<img src="Photos/thumbs/11.jpg" alt="image 10" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/9.jpg" alt="image 11" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/12.jpg" alt="image 12" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/13.jpg" alt="image 13" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/14.jpg" alt="image 14" onclick="openWin(this); return false;" />
</li>
<li>
<img src="Photos/thumbs/15.jpg" alt="image 15" onclick="openWin(this); return false;" />
</li>
</ul>
</div>
<div style="clear: both; padding: 5px 5px 10px 5px;">
<a id="toggleLink" href="javascript:void(0);" class="toggleLink" onclick="toggleExpand(this); return false;">Show more</a>
</div>
</div>
</ContentTemplate>
</telerik:RadWindow>
</div>
</form>
</body>
</html>