Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Show Gridview Images with Lightbox effect</title>
<style type="text/css">
.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>
<script type="text/javascript">
function ShowImages() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block'
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<asp:GridView runat="server" ID="gvImages" AutoGenerateColumns="false"
DataSourceID="sqldataImages" CssClass="Gridview"
HeaderStyle-BackColor="#61A6F8">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="ImageName" HeaderText="Image Name" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<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>
<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="fade" class="black_overlay"></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 RSS subscribe by email Subscribe by Email

22 comments :

Anonymous said...

Thanks....and nice article,very helpful..!!

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.

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.

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

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

Kiran,Software Engineer 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.

Anonymous said...

Thank you Suresh. Simple, elegant, helpful!

Neha said...

Hello Suresh,i am getting httphandler error,please can you sort out my dis problem.thank you,Neha

NATURE said...

hi i want coding grid view add column checkbox
i am click checkbox values store paid in db

pls

Anonymous said...

this Task Solve A problem For My Thanks

jayashri said...

your all post is so helpful for us and your way of presentation is also nice

krupalini said...

thanks yar.......... ur posts are really good

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

Suresh Dasari said...

@Ritha...
check this post
http://www.aspdotnet-suresh.com/2011/12/jquery-fancy-zoom-effect-for-image-in.html

Yogesh Chavan said...

Hello Sir . how to manage image size of lightbox effect

Anonymous said...

Very Helpful

JayPrakash kumar said...

hello sir how to edit update delete image in Gridview giv me fast answer

Zwelithini Dladlama said...

Eh thank you Suresh, very clear and straight to the point. Can you do that in VB.net?

syed irfan said...

Its not Working

syed irfan said...

Ya its working Dude. Thnx...

Anonymous said...

Thanks a ton! :)

Saranya Raman said...

hi can u please tell me how to set image as caption in gridview?

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.