Display ListView images with LightBox effect on image click in ASP.Net

Last Reply one year ago By kalpesh

Posted one year ago

hello, 

i have listview binding with sql database

it has images. 

i want on click on any image it shows light box. i use this light box. 

the problem is when i click on any image it shows only first image in light box i want the preview of the image i clicked on 

 csss

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

html

<asp:ListView ID="ListView2" runat="server" DataSourceID="SqlDataSource1">
    <ItemTemplate>
        <div class="col-md-3 nopadding">  
            <a href="#img1">
                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Image") %>' Width="80px" Height="80px" />
            </a>
            <a href="#_" class="lightbox" id="img1">
                <asp:Image ID="Image2" runat="server" ImageUrl='<%#Eval("Image") %>'  />
            </a>
        </div>
    </ItemTemplate>
</asp:ListView>
Posted one year ago Modified on one year ago

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