We'll get started by setting up a basic HTML file and the associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. Inside the body of our HTML document, we'll create a list of links to the sites we want to include in our design gallery, as shown in the following code:

<h3>One-Page Web Design Gallery</h3>
<ul>
  <li><a href="http://packtpub.com" rel="gallery">Packt Publishing</a></li>
  <li><a href="http://nataliemac.com" rel="gallery">NatalieMac</a></li>
  <li><a href="http://google.com" rel="gallery">Google</a></li>
</ul>

Note that we've added a rel attribute equal to gallery to each link.

Now, just as with the other Colorbox examples, choose a style and attach the style sheet in the header of the document, make all the necessary images available to your page, update the...