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

By: Suresh Dasari Mar 5, 2011

Introduction:

In this article I will explain how to show gridview images with lightbox effect using asp.net.

Description:

In my previous article I explained clearly how to insert images into our images folder and images path in database and display images in gridview from folder based on imagepaths exists in database for that check this link how to insert images into folder and imagespath into database and display images I gridview .After inserting images in folder and displayed in gridview I extended functionality to display gridview images using lightbox effect if user click on any image in gridview at that time we need to show that images with lightbox effect. To display images in gridview with lightbox effect we need to design our aspx page like this

<title>Show Gridview Images with Lightbox effect</title>

.Gridview

{

font-family:Verdana;

font-size:10pt;

font-weight:normal;

color:black;

}

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

}

.white_content {

display:none;

position: absolute;

top: 25%;

left: 35%;

width: 25%;

padding: 0px;

border: 0px solid #a6c25c;

background-color: white;

z-index:1002;

overflow: auto;

}

.headertext{

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

color:#f19a19;

font-weight:bold;

}

</style>

function ShowImages() {

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

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

return false;

}

</script>

</head>

<body>

<asp:GridView runat="server" ID="gvImages" AutoGenerateColumns="false"

DataSourceID="sqldataImages" CssClass="Gridview"

HeaderStyle-BackColor="#61A6F8">

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

<asp:BoundField DataField="ImageName" 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>

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

</tr>

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

</td></tr>

</table>

</td></tr>

</table>

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

</div>

</form>

</body>

</html>

After completion of aspx page design write the following code in code behind

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

}

After that set your database connection in web.config like this because we are using this connection in our sqldatasource to get the data from database

<connectionStrings> <add name="dbconnection" connectionString="Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"/> </connectionStrings >

Demo

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

24 comments :

Anonymous said...: Thanks....and nice article,very helpful..!!; April 17, 2011 at 11:07 AM
nikoo said...: Thanks for sharing this. I have a gridview but instead of show only image in LightBox I would like to show aspx page that is containing Product Image along with Product description. Is there any way to have lightbox show aspx page?
Thanks.; April 20, 2011 at 11:40 AM
Anonymous said...: Thanks for this article and I have small problem when we upload and click the submit button it is redirecting to the
Response.Redirect("~/GridviewImageswithLIghtboxeffect.aspx");
But there is no such page in your project.Can you rectify this for me.; April 20, 2011 at 1:35 PM
Suresh Dasari said...: hi nikoo here in my post i designed table to display the image with lightbox effect instead of image displaying you should use iframe in that iframe call ur productpage then at that u have a chance to show the product description page instead of image with lightbox effect; April 24, 2011 at 3:54 AM
Suresh Dasari said...: hi can you please check the code in this insert images in folder and image path in database post after insertion of image i am redirecting to home page may because of that is the page is redirecting u can check it once; April 24, 2011 at 3:59 AM
Kiran said...: Thanks suresh for you reply and I got rectified with the previous problem and I would like you to ask that can you include me the code for uploading multiple images in this example.; April 25, 2011 at 11:30 AM
Anonymous said...: Thank you Suresh. Simple, elegant, helpful!; November 8, 2011 at 1:39 PM
Neha said...: Hello Suresh,i am getting httphandler error,please can you sort out my dis problem.thank you,Neha; November 20, 2011 at 11:31 PM
NATURE said...: hi i want coding grid view add column checkbox
i am click checkbox values store paid in db

pls; February 6, 2012 at 11:18 AM
Anonymous said...: this Task Solve A problem For My Thanks; February 22, 2012 at 9:38 PM
Anonymous said...: your all post is so helpful for us and your way of presentation is also nice; March 7, 2012 at 8:42 PM
krupalini said...: thanks yar.......... ur posts are really good; May 29, 2012 at 3:16 AM
Anonymous said...: can u update mouseover on image ..it will zoom.that is featured image zoom in jquery..if u have update the articles...

Thanks...
Ritha.B.K; May 30, 2012 at 6:43 AM
Suresh Dasari said...: @Ritha...
check this post
http://www.aspdotnet-suresh.com/2011/12/jquery-fancy-zoom-effect-for-image-in.html; May 30, 2012 at 9:01 AM
Unknown said...: Hello Sir . how to manage image size of lightbox effect; January 24, 2013 at 3:14 AM
Anonymous said...: Very Helpful; March 14, 2013 at 4:28 AM
JayPrakash kumar said...: hello sir how to edit update delete image in Gridview giv me fast answer; March 29, 2013 at 5:15 AM
Unknown said...: Eh thank you Suresh, very clear and straight to the point. Can you do that in VB.net?; April 6, 2013 at 2:39 PM
Unknown said...: Its not Working; May 16, 2013 at 11:17 PM
Unknown said...: Ya its working Dude. Thnx...; May 17, 2013 at 2:07 AM
Anonymous said...: Thanks a ton! :); June 3, 2013 at 11:21 PM
Unknown said...: hi can u please tell me how to set image as caption in gridview?; February 5, 2014 at 8:57 PM
Anonymous said...: Hello, I'm a newer in ASP.NET, and very intested this codes, but I can't download the source codes. Why?; January 29, 2016 at 10:22 AM
Unknown said...: hai suresh

thanks for the great work,
one thing please check once most od the demo page image is not working properly
if you can do it ,its a big help for us.
thank u
muhasin NK; October 19, 2016 at 4:15 AM