Create a Facebook-like Ajax Image Gallery!

Monday, July 7, 2008

A lot of people have been using facebook and i am sure that everyone has noticed the ajax gallery that faecebook has. In this article we will try to make our own gallery that does the same stuff. When the user clicks on the image he navigates to the next and when the user presses the back button of the browser the previous image is displayed.

We are going to use a new feature of the AJAX Framework which is History Support! (available via the property of ScriptManager, EnableHistory)

First create a new "ASP.NET 3.5 Extensions Web Site"

Then at the aspx page we add :

EnableHistory : Enables the new feature of AJAX Framework which allows the user to navigate back and forward in an AJAX page.

EnableStateHash : If true the url responible for AJAX History is encoded. By Default is true.

OnNavigate : This event is fired when the user clicks the back button of the browser and the ScriptManager makes a postback.

At the aspx.cs page we add :

First we read the image folder (it could be from a database). We strip out the full path and we keep only the image name. Then we check if this is not a postback and we display the first image of our list. When the user clicks the Back Button the Navigate Event of the ScriptManager is fired. We get the current image index and we add +1.

When the user clicks on the ImageButton the Click event is fired. The point of interest at this method is the AddHistoryPoint of the ScriptManager. Using this method we add something that can tell us (when the user clicks the back button) what was the page like in order to be able to recreate it.

You can download the source code from here!

You can view a live example here!

That's it! enJoy!

11 Comments

Your live example throws an ASP.NET exception.

Herman - Tuesday, July 8, 2008 7:35:57 AM

Really? I just checked and every thing works fine. Is it possible to be more specific please?

Thanks,
Johh

djsolid - Tuesday, July 8, 2008 12:46:43 PM

I want to say thanks!,

name - Wednesday, July 29, 2009 7:11:42 AM

Where it is possible to buy the,

name - Thursday, July 30, 2009 4:07:57 AM

I get the exception Sequence contains no elements

on this line:
string ImgName = l.Where(x => x.FileName == GalleryImageButton.ImageUrl.Substring(GalleryImageButton.ImageUrl.LastIndexOf("/") + 1)).Select(x=>x.FileName.Substring(x.FileName.LastIndexOf("\\")+1)).First();

Kindly assist.

Elikat - Wednesday, November 18, 2009 11:30:27 AM

Another exception on this line:
l = (List)Cache["GalleryImages"];
-------

[A]System.Collections.Generic.List`1[Gallery+ImageInfo] cannot be cast to [B]System.Collections.Generic.List`1[Gallery+ImageInfo]. Type A originates from 'mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' in the context 'LoadNeither' at location 'C:\WINDOWS\assembly\GAC_32\mscorlib\2.0.0.0__b77a5c561934e089\mscorlib.dll'. Type B originates from 'mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' in the context 'LoadNeither' at location 'C:\WINDOWS\assembly\GAC_32\mscorlib\2.0.0.0__b77a5c561934e089\mscorlib.dll'.

Elikat - Wednesday, November 18, 2009 11:51:02 AM

Great Article, thanks for sharing

Waqas - Thursday, April 15, 2010 9:06:31 AM

Create a facebook like ajax image gallery.. Awful :)

weblogs.asp.net - Wednesday, April 6, 2011 7:03:06 PM

Good article; had been searching for a while before finally finding what I was looking for here.

One question though: how would you add the comments thread below for each image?

Tim Chambers - Tuesday, April 12, 2011 12:19:28 AM

Create a facebook like ajax image gallery.. Retweeted it :)

weblogs.asp.net - Sunday, May 1, 2011 7:23:52 PM

Create a facebook like ajax image gallery.. Bully :)

weblogs.asp.net - Tuesday, June 14, 2011 10:59:32 PM

Comments have been disabled for this content.