Designing the page

For the basic markup we will split the page in two parts. The left-hand side will have placeholders for album names and some help text for users. The right-hand side will have a placeholder div to display album pictures.

After these two partitions, there will be markup for dialog boxes to edit, delete, and zoom in to an image.

Creating placeholders for albums and pictures

Since the album names and pictures will be displayed in the page using JavaScript, we only need to specify placeholder divs for these. The following HTML markup for the index.html file will be used to divide the page in two parts and create the required elements:

<html> <head> <meta charset="utf-8"> <title>Photo Album Manager</title> <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css"> ...

Get Mastering jQuery UI now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.