Web Dev And Stuff

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!