Image 3

Adding Some Pagination Thumbnails

Now that the basic layout of the photo, title, and description has been created, we’ll add some navigational thumbnails that will appear to the right of the main image on each page. These images will provide a view of the previous and next images in our gallery. After the closing div for #content, add the following markup:

Again, you’ll need to change the href attributes from # to link to their proper locations. On some of the pages we’ll be creating, the navigation won’t include images, but it does on this page. Let’s take advantage of the fact that we’re able to use two classes, and apply a navigation class to all instances of this pagination-style navigation. We’ll use the thumbnails class only for unordered lists that contain thumbnail images—we’ll meet thumbnails again when we create our thumbnail page.

Both the image and the text are wrapped in the same link, because we want the title of the image to appear underneath the image, but to share the same link, so that the hover effects will be the same for both elements. The linebreak (br ) is not required, but we add this so that the title will continue to appear beneath the image when the page is viewed unstyled.

As you can see in Figure 1, the linebreak adds an unsightly amount of space between the thumbnail and the title. We can take care of that problem simply by setting the br to display: none. The image is already set to display: block, so the title will display on its own line beneath the image, as intended.

Figure 1. Page showing thumbnail navigation

Next, we’ll make the thumbnails appear in a style that’s similar to the main image, bymaking them share some of the same styles. Then we’ll position the thumbnails to the right of the page:

As you can see, these are very similar to the p.photo styles, but for a few minor differences:

• The padding needs to be set to 0.
• We don’t need to set a width.
• We turn the bullets off using list-style: none;.
• The navigation ul is positioned to the right of the main image.
  

Next, we need to style the list items (li):

Now, we’ll style the thumbnail images. Since the thumbnails will look exactly like the main photo, we can just add these new, thumbnail-specific styles to the existing styles we have for p.photo a and p.photo a:hover, like so:

Next, we need to add a width and a right margin, which will need to be created as a separate style rule, since p.photo won’t use it:

The thumbnail images we used have 75x75px dimensions, so we’re using an 80px width value here. The result of our efforts is shown in Figure 2.

Figure 2. Page showing styled thumbnail navigation

You now have a basic image page for your gallery. But how are visitors enticed to view this image page in the first place? By seeing the associated thumbnails page, of course!