ASP.NET - Photo gallery - Asked By mostafa hamdy on 05-Dec-11 04:51 AM

Hello all
I have some web site and I wish to add some images from some page in the site to the DB, and then  I want to display these images from the DB in a photo gallery ,please if any body know how can I develop  a gallery in asp.net please send me or tell me about some URL may help me in doing that
regards
Mostafa
Jitendra Faye replied to mostafa hamdy on 05-Dec-11 04:53 AM

To show images you can use HTTP Handler and GridView.

For that follow these steps-

Step1: Take one GridView , and design it with Custom Column, Before that set it's AutoGeneratedColumns Property to False.

like this -

To show image in GridView, take one image control in itemTemplate of GridView.

<ItemTemplate>

<asp:Image ID="Image2" runat="server" ImageUrl='<%# "Handler1.ashx?EmpId=" + Eval("Empid")%>' />

</ItemTemplate>

Step2 ; After Designing GridView Take one Hander , Because this will be used for showing images

After Designing GridView Take one Hander , Because this will be used for showing images

Use handler to show image-

//connect with database where you have stored images

public void ProcessRequest(HttpContext context)

{

SqlConnection cn = new SqlConnection("YOUR CONNECTION STRING");

cn.Open();

string empid = context.Request.QueryString["EmpID"].ToString();

SqlCommand cmd = new SqlCommand("select empimage from empimageTABLE where empid=" + empid, cn);

SqlDataReader dr = cmd.ExecuteReader();

dr.Read();

context.Response.BinaryWrite((byte[])dr["empimage"]);

dr.Close();

cn.Close();

}

try this code and let me know.

dipa ahuja replied to mostafa hamdy on 05-Dec-11 06:11 AM
Step 1: Take a DataList and bind it with the images table and in the item Template write the image field this way:
 
<ItemTemplate>
<a id="small_Img" href='<%# Eval("imageurl" ,"images/{0}") %>'>
<asp:Image ID="ImgBtn1" runat="server" Height="20" Width="20" ImageUrl='<%# Eval("imageurl" ,"images/{0}") %>' />
</a>
</ItemTemplate>
 
Step 2: Take the fancyBox:
 
<script src="fbox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="fbox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
  $(document).ready(function () {
 
    $("a#small_Img").fancybox();
  });
 
</script>
 
Download the fancybox from here :
 
http://fancybox.net/