Creating the folder structure
As usual, we will begin by setting up the folder structure:
Create a folder named
Chapter8
inside theMasteringjQueryUI
folder. Directly inside this folder create an html file and name itindex.html
. This file will keep our html markup.For this chapter, we will need two more files here. Create two files and name them
albums.json
andajaxAlbum.php
. Thealbums.json
file will keep the albums and pictures data in the JSON format andajaxAlbum.php
is the backend script that will be called via AJAX to edit the image name, delete an image, and reorder images of an album.Also, copy the
js
andcss
folders of jQuery UI inside theChapter8
folder.Create a new folder named
images
inside theChapter8
folder and put eight different images of size 400 px x 400 px inside it.Now create thumbnails of these images of the size 150 px x 150 px. Create another subfolder named
thumbs
insideimages
and put these thumbnails there.Now open the
js
folder and create a new file namedphotoAlbum...