We'll get started by creating a basic HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. Inside the body of the HTML document, we'll add a series of images using the new HTML5 figure and figcaption elements, as shown in the following code:

<figure>
  <img src="images/loading.gif" />
  <figcaption>
    <a href="http://www.public-domain-image.com/wallpapers-public-domain-images-pictures/a-bench-for-resting.jpg.html" title="A bench for resting">A bench for resting</a> by Steve Hillebrand, U.S. Fish and Wildlife Service
  </figcaption>
</figure>

Note that we've used a small, animated .gif image as a placeholder rather than the image we actually want to display. We'll be replacing this later with the actual image. You'll want to add at least four or five images to...