Mastering jQuery UI

Getting code structure ready

We will begin by identifying and declaring all the methods required for all the operations. We will first have to retrieve the JSON from the server. Then we will display album names in the left-hand-side panel. After this, we will attach several event handlers for operations such as displaying the pictures of an album, edit image, delete, and so on.

Start with the following code structure in your js/photoAlbum.js file, which defines an object literal to wrap the functionality for the album manager and a document ready handler for jQuery:

var albums = { jsonAlbums : null, currentAlbum : null, currentPictureId : null, initialize : function() { $.getJSON( "albums.json", function(data) { albums.jsonAlbums = data; albums.fillAlbumNames(); ...