Monday, 18 March 2013

Display Gridview images with lightbox effect whenever user clicks on images in gridview using asp.net




Description:-

            In this Example we Expalin that How to Display gridview Image with LightBox Effect in Asp.Net.the  Image are uploaded and stored in database and we can fetch from the database and bind to the Gridview.

Here we use the Style or css to Display Image with LightBox Effect and also in zoom level. The below is script for that

.black_overlay{
display:none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

In above we use the style property with name opacity are used to set the image Lightbox and background is chage as a dark. When user move the mouse to the image the image is Display with lightbox.

to show example of how to send SMS in asp.net click here Send SMS to user in asp.net

to show example of send Email in asp.net click here send Email with Attechment in asp.net 

to show example of Export Gridview data to PDF in asp.net click here Export gridview data to PDF


Aspx Code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Display Gridview Images with Lightbox effect in asp.Net</title>
    <style type="text/css">
        .Gridview {
            font-family: 'Times New Roman';
            font-weight: normal;
            color: black;
            font-size: 12pt;
        }

        .black_overlay {
            display: none;
            background-color: aliceblue;
            z-index: 1000;
            -moz-opacity: 0.65;
            position: absolute;
            top: 1%;
            left: 1%;
            width: 90%;
            height: 90%;
            opacity: .70;
            filter: alpha(opacity=80);
        }

        .white_content {
            display: none;
            border: 1px solid #a6c25c;
            background-color: white;
            position: absolute;
            top: 30%;
            left: 30%;
            width: 30%;
            padding: 1px;
            z-index: 1000;
            overflow: auto;
        }

        .headertext {
            font-family: 'Times New Roman', Helvetica, sans-serif;
            font-size: 12px;
            font-weight: bold;
            color: #f19a19;
        }
    </style>
    <script type="text/javascript">
        function ShowImages() {
            document.getElementById('light').style.display = 'block';
            document.getElementById('fadebox').style.display = 'block'
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div align="center">
            <asp:FileUpload ID="fileupload1" runat="server" />
            <br />
            <asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" />
        </div>
        <div align="center">
            <asp:GridView runat="server" ID="gvlightImage" AutoGenerateColumns="False"
                DataSourceID="sqldataImages" CssClass="Gridview"
                HeaderStyle-BackColor="#61A6F8" CellPadding="4" EnableModelValidation="True" ForeColor="#333333" GridLines="None">
                <AlternatingRowStyle BackColor="White" />
                <Columns>
                    <asp:BoundField DataField="ID" HeaderText="ID" />
                    <asp:BoundField DataField="Name" HeaderText="Image Name" />
                    <asp:TemplateField HeaderText="Image">
                        <ItemTemplate>
                            <asp:ImageButton ID="imgbtn" runat="server" ImageUrl='<%#Eval("ImagePath") %>' OnClick="imgbtn_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <EditRowStyle BackColor="#2461BF" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White"></HeaderStyle>
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#EFF3FB" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            </asp:GridView>
            <asp:SqlDataSource ID="sqldataImages" runat="server" ConnectionString="<%$ConnectionStrings:dbconnection %>"
                SelectCommand="select * from ImagesPath"></asp:SqlDataSource>
        </div>
        <div id="light" class="white_content">
            <table cellpadding="0" cellspacing="0" border="0" style="background-color: #a6c25c;" width="100%">
                <tr>
                    <td height="16px"><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
                        <img src="close.gif" style="border: 0px" width="13px" align="right" height="13px" /></a></td>
                </tr>
                <tr>
                    <td style="padding-left: 16px; padding-right: 16px; padding-bottom: 16px">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #fff" width="100%">
                            <tr>
                                <td align="center" colspan="2" class="headertext">Gridview Image </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <asp:Image ID="imglightbox" runat="server" />
                                </td>
                            </tr>
                            <tr>
                                <td height="10px"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <div align="center" class=" headertext">
                <asp:Label ID="txtlbl" runat="server"></asp:Label>
            </div>
        </div>
        <div id="fadebox" class="black_overlay"></div>
    </form>
</body>
</html>




  CodeBehind:-



using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnAdd_Click(object sender, EventArgs e)
    {
        //Get Filename from fileupload control
        string filename = Path.GetFileName(fileupload1.PostedFile.FileName);
        //Save images into Images folder
        fileupload1.SaveAs(Server.MapPath("Images/" + filename));
        //Getting dbconnection from web.config connectionstring
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());
        //Open the database connection
        con.Open();
        //Query to insert images path and name into database
        SqlCommand cmd = new SqlCommand("Insert into ImagesPath(Name,ImagePath) values(@Name,@ImagePath)", con);
        //Passing parameters to query
        cmd.Parameters.AddWithValue("@Name", filename);
        cmd.Parameters.AddWithValue("@ImagePath", "Images/" + filename);
        cmd.ExecuteNonQuery();
        //Close dbconnection
        con.Close();
        Response.Redirect("~/GridviewImageswithLIghtboxeffect.aspx");
    }
    protected void imgbtn_Click(object sender, EventArgs e)
    {
        ImageButton imgbtn = sender as ImageButton;
        GridViewRow gvrow = imgbtn.NamingContainer as GridViewRow;
        //Find Image button in gridview
        ImageButton imgbtntxt =(ImageButton)gvrow.FindControl("imgbtn");
        //Assign imagebutton url to image field in lightbox
        imglightbox.ImageUrl = imgbtn.ImageUrl;
        ScriptManager.RegisterStartupScript(Page, typeof(Page) , "ShowValidation", "javascript:ShowImages();", true);
    }
}


0 comments:

Post a Comment