Problem is because in ListView you have assigned the AncherLink href Id value as HardCoded as #img1 also the second anchor link value is img1. As Listview get render depend on its records value it will just find the first occurrences of Image Id from the ListView Records.
You need to set some unique value to it so it will work fine here i have created Sample Same as per your Design also assigned the anchor link value based on the Container.DataItemIndex value.
SQL
CREATE TABLE [tblFiles]
(
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NOT NULL,
[Path] [nvarchar](200) NOT NULL
) ON [PRIMARY]
GO
INSERT INTO tblFiles(Id,Name,Path)
SELECT 1,'Autumn Leaves.jpg','images/Autumn Leaves.jpg'
UNION ALL
SELECT 4,'Garden.jpg','images/Garden.jpg'
Images in folder
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.lightbox
{
/** Default lightbox to hidden */
display: none; /** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img
{
/** Pad the lightbox image */
max-width: 90%;
max-height: 80%;
margin-top: 10%;
-webkit-box-shadow: 0px -1px 17px -2px rgba(255,255,255,1);
-moz-box-shadow: 0px -1px 17px -2px rgba(255,255,255,1);
box-shadow: 0px -1px 17px -2px rgba(255,255,255,1);
}
.lightbox:target
{
/** Remove default browser outline */
outline: none; /** Unhide lightbox **/
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="ListView2" runat="server">
<ItemTemplate>
<div class="col-md-3 nopadding">
<a href='<%# string.Format("#{0}",Container.DataItemIndex+1 ) %>'>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Path") %>' Width="80px"
Height="80px" />
</a><a href="#_" class="lightbox" id='<%# Container.DataItemIndex+1 %>'>
<asp:Image ID="Image2" runat="server" ImageUrl='<%#Eval("Path") %>' />
</a>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conDBFiles"].ConnectionString);
string strQuery = "SELECT TOP 2 * FROM tblFiles ORDER BY ID";
SqlCommand cmd = new SqlCommand(strQuery, con);
DataTable dt = new DataTable();
SqlDataAdapter sda = new SqlDataAdapter();
cmd.CommandType = CommandType.Text;
con.Open();
sda.SelectCommand = cmd;
sda.Fill(dt);
ListView2.DataSource = dt;
ListView2.DataBind();
con.Close();
sda.Dispose();
con.Dispose();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("conDBFiles").ConnectionString)
Dim strQuery As String = "SELECT TOP 2 * FROM tblFiles ORDER BY ID"
Dim cmd As SqlCommand = New SqlCommand(strQuery, con)
Dim dt As DataTable = New DataTable()
Dim sda As SqlDataAdapter = New SqlDataAdapter()
cmd.CommandType = CommandType.Text
con.Open()
sda.SelectCommand = cmd
sda.Fill(dt)
ListView2.DataSource = dt
ListView2.DataBind()
con.Close()
sda.Dispose()
con.Dispose()
End If
End Sub
Screenshot
