单击显示当前图像放大

时间:2014-04-29 04:52:07

标签: javascript asp.net css lightbox

这是我的代码

<asp:DataList ID="DataList2" runat="server" BackColor="Gray" BorderColor="#666666"
                                BorderStyle="None" BorderWidth="2px" CellPadding="3"                      
                                CellSpacing="2" RepeatLayout="Flow" Font-Names="Verdana"
                                Font-Size="Small" GridLines="Both" RepeatColumns="3"  
                                RepeatDirection="Horizontal"
                                Width="100%">

<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#333333" Font-Bold="True" Font-Size="Large" ForeColor="White"
                                 HorizontalAlign="Center" VerticalAlign="Middle" />
    <HeaderTemplate> Employee Details </HeaderTemplate>
    <ItemStyle BackColor="White" ForeColor="Black" BorderWidth="2px" />
    <ItemTemplate>
      <%--imp---*********---------********--%>    
      <a data-lightbox="roadtrip" href='<%# Eval("Path", "~/PlayerImages/{0}") %>' > 
         <asp:Image ID="Image1" runat="server" ImageUrl='<%# Bind("Path",
                   "~/PlayerImages/{0}") %>' Width="50%" Height="50%" />
      <%--imp---*********---------********--%>
      </a><br />
      <b>Employee Name:</b>
      <asp:Label ID="lblCName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>

      </ItemTemplate>
</asp:DataList>  

我标记为imp的代码区域 在我设置href='<%# Eval("Path", "~/PlayerImages/{0}") %>'的第一行,因为我想显示当前图像的放大图像,但它不起作用。
这样做的原因是我认为数据没有绑定到href,因为当我通过固定路径代替Eval时,它会向我显示该图像。
我不知道该怎么做。 请建议我解决方案。

1 个答案:

答案 0 :(得分:1)

更改DataList定义,如下所示

<asp:DataList ID="DataList2" runat="server" BackColor="Gray" BorderColor="#666666"
                            BorderStyle="None" BorderWidth="2px" CellPadding="3"                      
                            CellSpacing="2" RepeatLayout="Flow" Font-Names="Verdana"
                            Font-Size="Small" GridLines="Both" RepeatColumns="3"  
                            RepeatDirection="Horizontal"
                            Width="100%" ItemDataBound="DataList2_ItemDataBound">

然后更改ItemTemplate,如下所示

<ItemTemplate>
<asp:Literal runat="server" ID="ltrlLightBox"/>
  <b>Employee Name:</b>
  <asp:Label ID="lblCName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
  </ItemTemplate>

访问literal control

中的ItemDatabound event
protected void DataList2_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        Literal ltrlLightBox = (Literal)e.Item.FindControl("ltrlLightBox");
        DataRow drow = (DataRow)e.Item.DataItem;
        ltrlLightBox.Text = "<a data-lightbox=\"roadtrip\" href=\"PlayerImages/" + drow["Path"].ToString() + "\" > <img src=\"PlayerImages/" + drow["Path"].ToString() + "\" width=\"50%\" height=\"50%\" /></a><br />";
    }
}