Building a Photo Gallery in ASP.net 2.0 in 10 minutes

In this post i`ll show how easy it is to build a small and an efficient photo gallery using standard ASP.net controls.
Before we get started with the actual thing, lets visualize what all a photo gallery would have.

1) Its going to have a array of thumbnails splashed on the page.
2) The thumbnails would show an enlarged image when you click over them.
3) Last, but not the least, you`ll need pictures to flood the gallery. (Make a new folder, and place all the images you want to display as part of the photo gallery in it. Name the folder as "ImageFolder")

Now, lets consider the first point, ans try to build a design to design the thumbnails on the page. I felt that the "DataList" control would be a nice option. So lets go ahead and drag one to our webform. The code would look some what like the one shown below.

<asp:DataList ID="DataList2" runat="server"
RepeatColumns="5"></asp:DataList>

I have included the RepeatColumns="5" property so as to show five images in a row, you could set a value of your choice, depending on the design requirements.
Now you need to show images, and for that drag a HTML image tag from the toolbox and place it in side the of the DataList.

<asp:DataList ID="DataList2" runat="server" 
RepeatColumn ="5"><ItemTemplate>
<img src='<%# Container.DataItem %>
' border="0" title="Click to Enlarge"/></ItemTemplate>
</asp:DataList>

I have added <%# Container.DataItem %> statement, so as to pick the image paths from a dataset. I`ll cover this aspect later, so for the time, just let it be this way. For the time, thats all you require in the design part. Lets hit on to the code behind file to make the required changes.
On the Page load event write the following code.

string path = "ImageFolder/";
ArrayList pics =new ArrayList();
foreach (
string s in Directory.GetFiles(Server.MapPath(path), "*.jpg"))
{
string html = path + Path.GetFileName(s);
pics.Add(html);
}
DataList2.DataSource = pics;
DataList2.DataBind();

You need to add System.IO namespace to make the above code work. Now, when you run the project, you will see that the images are full size, and not exactly in the form of thumbnails. So, the next task at hand is to generate thumbnails for the images. There are two ways to achieve the objective.

1) To generate thumbnail images on the fly
2) Bind the datalist to the a folder with thumbnail images itself.

To achieve the objective using option 1 you need to change the HTML, particularly the image tag in the datalist. Here`s how it will look.

<img src='Makethumbnail.aspx?file=
<%# Container.DataItem %>' border="0"
title="Click to Enlarge"/>

Notice the statement "Makethumbnail.aspx?file=". You`d feel, that how could a standard aspx file be a source of an image. In this case it is, and this is what is going to help us in creating a thumbnail. So, add a new webform by the name of Makethumbnail.aspx, and go to the codebehind. Just paste the code as i have written below.

string file = Request.QueryString["file"];
System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath(file));
System.Drawing.Image thumbnailImage = image.GetThumbnailImage(75, 71, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);
MemoryStream imageStream = new MemoryStream();
thumbnailImage.Save(imageStream, System.Drawing.Imaging.ImageFormat.Jpeg);
byte[] imageContent = new Byte[imageStream.Length];
imageStream.Position = 0;
imageStream.Read(imageContent, 0, (int)imageStream.Length);
Response.ContentType = "image/gif";
Response.BinaryWrite(imageContent);

Now paste this code outside the page load
public bool ThumbnailCallback()
{
return true;
}

You will now find after compiling your project, that thumbnails now appear in place. You`ll notice that the images appear to be shrunk, and lose points on quality. So, to compensate for the same, you can go in to bind thumbnail images itself to the data list. But, do take note, that thumbnails would score on the basis of performance, as the size would be drastically low, compared to a high quality thumbnail. Finally, the choice is yours.

After completing our first objective, lets go and add some interactivity. To make the image clickable, you will to add a hyperlink, and a corresponding URL. Now our code would look something like this

<asp:HyperLink ID="HyperLink1"
runat="server" rel="lightbox[roadtrip]"
NavigateUrl='<%# Container.DataItem %>'
ToolTip="Press left or  right arrow keys to navigate">
<img src='Makethumbnail.aspx?file=
<%# Container.DataItem %>' border="0"
title="Click to Enlarge"/>
</asp:HyperLink> 

The above code makes the image clickable and adds the animation, courtesy the Lightbox JS . You will need the lightbox files, to get them click here. Finally run your project, and click on one of the images. You will see how the images pop up at the center of the screen with really professional effects. You can also navigate across your images by pressing the left/right arrow keys, or clicking on the left/right end of the images.

This completes the photo gallery sample. You can alter the model to your needs, by changing a few variables. I hope this helps in accomplishing your task....