无法使用灯箱脚本[jQuery]在datalist控件中显示图像

时间:2009-11-15 15:33:53

标签: asp.net jquery

我正在尝试在datalist控件中显示缩略图图像,该图像工作正常,但是一旦我点击图像而不是在页面前显示弹出窗口。它显示在datalist控件后面  我已下载灯箱脚本添加了所有引用ans css   这里出了什么问题 这里我推荐的FullImage.ashx用于显示原始图像 和ThumbNailImage.ashx用于将原始图像大小转换为缩略图大小   下面是我所做的代码

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <script src="js/builder.js" type="text/javascript"></script>
        <script src="js/scriptaculous.js" type="text/javascript"></script>
        <script src="js/prototype.js" type="text/javascript"></script>
        <script src="js/lightbox.js" type="text/javascript"></script>
        <script src="js/effects.js" type="text/javascript"></script>
        <link href="css/lightbox.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <table class="FriendsTable" width="100%">
            <tr>
                <td align="center" colspan="10">
                    <asp:Panel ID="pnlFriends" runat="server" Height="100%" Width="100%">
                        <asp:DataList ID="gvImages" runat="server" RepeatColumns="5" RepeatDirection="Horizontal"
                            Style="z-index: 101; left: 16px; position: absolute; top: 16px" Width="100%"
                            OnItemDataBound="gvImages_ItemDataBound" BorderWidth="1px" GridLines="Both" CellPadding="3"
                            BackColor="#DEBA84" CellSpacing="2" BorderStyle="None" BorderColor="#DEBA84">
                            <ItemTemplate>
                                <table border="0">
                                    <tr>
                                        <td>
                                            imagename:
                                        </td>
                                        <td>
                                            <asp:Label ID="lblCustomerID" runat="server" Text='<%# 
    Eval("imagename") %>' />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            ImageID:
                                        </td>
                                        <td>
                                            <asp:Label ID="lblEmployeeID" runat="server" Text='<%#
    Eval("ImageID") %>' />
                                        </td>
                                    </tr>
                                </table>
                                <%--<a href="javascript:void(window.open('<%# "FullImage.ashx?ImID="+ Eval("ImageID")%>','_blank','toolbar=no,menubar=no',rel = "lightbox">))">--%>
                                <a href='<%# "FullImage.ashx?ImID="+ Eval("ImageID") %>' rel="lightbox">
                                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ThumbNailImage.ashx?ImID="+ Eval("ImageID")  %>'
                                        Height="100" Width="100" Style="border: 0" />
                                </a>
                            </ItemTemplate>
                            <SeparatorTemplate>
                                <br>
                                <br>
                            </SeparatorTemplate>
                        </asp:DataList>
                    </asp:Panel>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>

任何帮助都会非常感谢你

1 个答案:

答案 0 :(得分:0)

我做错了买

Style="z-index: 101; left: 16px; position: absolute; top: 16px" in the datalist control
删除此代码后

 一切都运转良好