<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadLightBox.aspx.cs" Inherits="RadCalendar" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            if (typeof document.getElementsByClassName != 'function') {
                document.getElementsByClassName = function () {
                    var elms = document.getElementsByTagName('*');
                    var ei = new Array();
                    for (i = 0; i < elms.length; i++) {
                        if (elms[i].getAttribute('class')) {
                            ecl = elms[i].getAttribute('class').split(' ');
                            for (j = 0; j < ecl.length; j++) {
                                if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                                    ei.push(elms[i]);
                                }
                            }
                        } else if (elms[i].className) {
                            ecl = elms[i].className.split(' ');
                            for (j = 0; j < ecl.length; j++) {
                                if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                                    ei.push(elms[i]);
                                }
                            }
                        }
                    }
                    return ei;
                }
            }

            function showedImage(sender, args) {
                var activeImage = document.getElementsByClassName('rltbActiveImage')[0];
                activeImage.alt = "";
            }

            function OpenRadLigthBox(index) {
                var lightBox = $find('<%= RadLightBox1.ClientID %>');
                lightBox.show();
            }

        </script>
        <style type="text/css">
        </style>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
        </telerik:RadScriptManager>

        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        </telerik:RadAjaxManager>

        <telerik:RadButton ID="RadButton1" runat="server" Text="Show Image" OnClientClicked="OpenRadLigthBox" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>

        <telerik:RadLightBox ID="RadLightBox1" runat="server" DataImageUrlField="ImageUrl" DataDescriptionField="ImageDescription" TabIndex="101" 
            DataTitleField="ImageTitle" DataSourceID="SqlDataSource1" Modal="true" AppendDataBoundItems="true" ToolTip="" ClientSettings-ClientEvents-OnShowed="showedImage">
        </telerik:RadLightBox>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM FurnitureDesign"></asp:SqlDataSource>

    </form>
</body>
</html>
