jQuery for Designers Beginner's Guide

Time for action – creating a one-page web gallery

Follow these steps to create a one-page web gallery:

1. We'll get started by setting up a basic HTML file and 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:

   <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 I've added a rel attribute equal to gallery to each link.

2. Now, just as with the other Colorbox examples, choose a style and attach ...