GridView image popup using JQuery and asp.net

GridView image popup using JQuery and asp.net

First of all i create one table with three field(id,ImageName,ImagePath). I save image path at database and image at folder. To do these you will required JQuery and CSS file which i mention below.(Download code there you will get jquery and css file).

<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

    <script type="text/javascript" src="js/prototype.js"></script>

    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

    <script type="text/javascript" src="js/lightbox.js"></script>


Below i show the design page gridview portion.

 <asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False" ShowHeader="true"
        CellPadding="5">
        <Columns>
            <asp:TemplateColumn HeaderText="Photo">
                <ItemTemplate>
                    <a href='<%#GetDetail(DataBinder.Eval(Container.DataItem,"id"))%>' rel="lightbox"
                        title='<%#title(DataBinder.Eval(Container.DataItem,"ImageName"))%>'>
                        <img height="100" width="90" style="border: Solid 1px Black;" src='<%#GetDetail(DataBinder.Eval(Container.DataItem,"id"))%>' />
                    </a>
                </ItemTemplate>
            </asp:TemplateColumn>
        </Columns>
    </asp:DataGrid>

Gridview bind at page load like below

        SqlConnection con = new SqlConnection();
        SqlCommand cmd = new SqlCommand();
        con = new SqlConnection("Data Source=server name;Initial Catalog=database name;Integrated Security=SSPI;");
        cmd.Connection = con;
        cmd.CommandText = "Select * from imagetable";
        con.Open();
        DataGrid1.DataSource = cmd.ExecuteReader();
        DataGrid1.DataBind();
        con.Close();

Now Look at below line through which when gridview image is click it show image at popup.

src='<%#GetDetail(DataBinder.Eval(Container.DataItem,"id"))%>'

I write server side code to get image for respective id, like below and when you click at gridview image it's directly go to server side and check GetDetail().

public string GetDetail(object objEmplayeeId)
    {
        string constr = "Data Source=Subhasish-PC;Initial Catalog=testabhijit;Integrated Security=SSPI;";
        int EmplayeeId = int.Parse(objEmplayeeId.ToString());
        //string path = table.Rows[0]["ImagePath"].ToString();
        string query = "SELECT ImagePath FROM imagetable WHERE id = '" + EmplayeeId  + "'";


        SqlDataAdapter da = new SqlDataAdapter(query, constr);
        DataTable table = new DataTable();
        da.Fill(table);
        string path = table.Rows[0]["ImagePath"].ToString();
        return path;

    }

You can download the code attach with these tutorial. Happy codding.