<%@ Page Language="c#" %>
<%@ 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" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<script type="text/javascript">
function OpenRadLigthBox(index) {
var lightBox = $find('<%= RadLightBox1.ClientID %>');
lightBox.set_currentItemIndex(index);
lightBox.show();
}
</script>
<div class="demo-container no-bg">
<telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" DataImageUrlField="ImageUrl" DataDescriptionField="ImageDescription" TabIndex="101" ZIndex="100000"
DataTitleField="ImageTitle" DataSourceID="SqlDataSource1" Modal="true" AppendDataBoundItems="true">
<ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone">
<AnimationSettings HideAnimation="Resize" NextAnimation="Resize" PrevAnimation="Resize" ShowAnimation="Resize" />
</ClientSettings>
</telerik:RadLightBox>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM FurnitureDesign"></asp:SqlDataSource>
<div>
<asp:Image ID="Logo" runat="server" ImageUrl="~/LightBox/Examples/Data-Binding/images/logo.png" AlternateText="Logo" CssClass="furniture_logo" />
<div class="image_holder">
<div class="column">
<a href="#" onclick="OpenRadLigthBox(0); return false;" class="single_image">
<asp:Image ID="LeatherCouch" AlternateText="Leather Couch" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/leather_couch.png" />
<span class="product_info">
<span class="product">leather couch</span>
<span class="price">$ 2370</span>
</span>
</a>
<a href="#" onclick="OpenRadLigthBox(1); return false;" class="single_image">
<asp:Image ID="BackSeatChair" AlternateText="Back Seat Chair" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/back_seat_chair.png" />
<span class="product_info">
<span class="product">back seat chair</span>
<span class="price">$ 370</span>
</span>
</a>
<a href="#" onclick="OpenRadLigthBox(2); return false;" class="single_image">
<asp:Image ID="LeatherSemisofal" AlternateText="Leather Semisofal" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/leather_semisofa.png" />
<span class="product_info">
<span class="product">leather semisofa</span>
<span class="price">$ 2120</span>
</span>
</a>
</div>
<div class="column">
<a href="#" onclick="OpenRadLigthBox(3); return false;" class="single_image">
<asp:Image ID="Lounger" AlternateText="Lounger" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/lounger.png" />
<span class="product_info">
<span class="product">lounger</span>
<span class="price">$ 830</span>
</span>
</a>
<a href="#" onclick="OpenRadLigthBox(4); return false;" class="single_image">
<asp:Image ID="DeluxeSofa" AlternateText="Deluxe Sofa" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/deluxe_sofa.png" />
<span class="product_info">
<span class="product">deluxe sofa</span>
<span class="price">$ 1860</span>
</span>
</a>
<a href="#" onclick="OpenRadLigthBox(5); return false;" class="single_image">
<asp:Image ID="RattanWavelyLounger" AlternateText="Rattan Wavely Lounger" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/rattan_wavely_lounger.png" />
<span class="product_info">
<span class="product">rattan wavely lounger</span>
<span class="price">$ 710</span>
</span>
</a>
</div>
<div class="column">
<a href="#" onclick="OpenRadLigthBox(6); return false;" class="single_image">
<asp:Image ID="GraphiteChair" AlternateText="Graphite Chair" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/graphite_chair.png" />
<span class="product_info">
<span class="product">graphite chair</span>
<span class="price">$ 420</span>
</span>
</a>
<a href="#" onclick="OpenRadLigthBox(7); return false;" class="single_image">
<asp:Image ID="RattanLounger" AlternateText="Rattan Lounger" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/rattan_lounger.png" />
<span class="product_info">
<span class="product">rattan lounger</span>
<span class="price">$ 530</span>
</span>
</a>
<a href="#" onclick="OpenRadLigthBox(8); return false;" class="single_image">
<asp:Image ID="RedLeatherArmchair" AlternateText="Red Leather Armchair" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/red_leather_armchair.png" />
<span class="product_info">
<span class="product">red leather armchair</span>
<span class="price">$ 830</span>
</span>
</a>
</div>
</div>
</div>
</div>
</form>
</body>
</html>