Follow these steps to create a one-page web gallery:
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 togallery
to each link.Now, just as with the other Colorbox examples, choose a style and attach the stylesheet in the header of the document, make all the necessary images available to your page, update the path to the images in...