单击放大显示当前图像

Show current image enlarge on click

本文关键字：图像显示放大单击更新时间：2023-09-26

这是我的代码

<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时，它会向我显示该图像
我不知道怎么做。请给我建议解决方案。

更改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">

然后像下面那样改变CCD_ 5

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

访问ItemDatabound event 中的literal control

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 />";
    }
}