Display Gridview images with lightbox effect whenever user clicks on images in gridview using asp.net ~ Asp .Net Solution Kirit Kapupara

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

<title>Display Gridview Images with Lightbox effect in asp.Net</title>

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

function ShowImages() {

document.getElementById('light').style.display = 'block';

document.getElementById('fadebox').style.display = 'block'

return false;

}

</script>

</head>

<body>

<asp:FileUpload ID="fileupload1" runat="server" />

<br />

<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" />

</div>

<asp:GridView runat="server" ID="gvlightImage" AutoGenerateColumns="False"

DataSourceID="sqldataImages" CssClass="Gridview"

HeaderStyle-BackColor="#61A6F8" CellPadding="4" EnableModelValidation="True" ForeColor="#333333" GridLines="None">

<asp:BoundField DataField="ID" HeaderText="ID" />

<asp:BoundField DataField="Name" HeaderText="Image Name" />

<asp:TemplateField HeaderText="Image">

<asp:ImageButton ID="imgbtn" runat="server" ImageUrl='<%#Eval("ImagePath") %>' OnClick="imgbtn_Click" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="sqldataImages" runat="server" ConnectionString="<%$ConnectionStrings:dbconnection %>"

SelectCommand="select * from ImagesPath"></asp:SqlDataSource>

</div>

<tr>

</tr>

<tr>

<tr>

<td align="center" colspan="2" class="headertext">Gridview Image </td>

</tr>

<tr>

</tr>

<tr>

<asp:Image ID="imglightbox" runat="server" />

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<asp:Label ID="txtlbl" runat="server"></asp:Label>

</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);

}

Monday 18 March 2013

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

0 comments:

Post a Comment

Like my Page on facebook

Popular Posts

Author

Label