The most straight-forward implementation, with a few minor adjustments: a bit of margin adjusting for the 2011 theme, turning the display off for the description on the page, and turning the caption off on the lightbox.

Download the stylesheets used here.

This example puts the thumbnails next to the main image. This works well if the number of thumbnails doesn’t get too large in quantity. A minimum width on the wrapper keeps the thumbnails at three-wide minimum. Media queries is helpful in moving the thumbnails if the browser window shrinks down or you want an iPhone sized gallery. Here there are three ways the thumbnails appear: below the image on iPad and small screens, as three columns to the right of the main image, and in four columns to the right of the image.

Download the stylesheets used here.

Example 3 removes the thumbnail icon image and styles the list-item around the now-gone image. In some ways, this design encourages a user to go to the lightbox. Might as well flip through sequentially. The little squares act like indicators, but need to be large enough to navigate through the images. Changing the cursor adds a nice little reminder about what is to happen. No opacity changes on this example, either.

Download the stylesheets used here.

Example 4 removes the thumbnail icon image and styles shows the image number.

Download the stylesheets used here.