So far we have experimented with the jQuery UI components in many new ways and have touched almost all of the components. In Chapter 7, Using jQuery UI with Google Maps API, we created a mashup with the help of slider, accordion, tabs, and spinner along with the Google Maps API.

This chapter will teach you to create a simple photo album manager. Users will be presented a list of photo albums on the left-hand side of the page. Clicking any album will display all the pictures in that album on the right-hand side panel. The following is a screenshot of the finished example. Icons for edit and delete are visible towards the right-hand-side of each image caption:

We will allow users to edit the title of an image and delete an image by providing icons for these actions. Clicking on an image will open its larger version in a dialog box. Users will also be able to rearrange the pictures of an album in a sequence as per their preference.

The following image...