Show current image enlarge on click

Question

This is my code

<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>  

the area of code where i marked as imp
in the first line i had set href='<%# Eval("Path", "~/PlayerImages/{0}") %>' because i want to show enlarge image of the current image but it is not working.
The reason for this is i think data is not bound to that href because when i am passing a fixed path in place of Eval it displays me that image.
I dont know how to do it. please suggest me solutions.

Answer 1

change DataList definition like below

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

then change ItemTemplate like below

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

access the literal control in 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 />";
    }
}