How do I arrange thumbnails in a photo slideshow?

Hi Janine,

I’m one of your students. Thank you for your very helpful online courses.

I am writing to ask your opinion. I am a graphic designer and illustrator. I am putting together my own  website and would like to show samples of my work. My thought is to have a table of 15 thumbnails and a large  mage to the left of the grid. The table would have 2 columns, one with the thumbnail images and one with the big version. Then using the swap image feature in Dreamweaver I would set them up to swap out each image as the viewer rolls over each thumbnail. Does that sound like the most efficient way to do that?

Otherwise, I thought I would have to create a series of Div tags using margins and padding to arrange them, but that seems like a lot of div tags, if each div tag had to contain an image.

 Thank you for your help. Yours truly,

Mike

Hi Mike,

 Thank you for your kind words about my training . I understand why you think tables might be a good solution to this design challenge, but trust me, they’re not. The only time Tables are still recommended in web design, is when you’re formatting ‘tabular data’ — in your case, I would not recommend a table.

However, it’s not as hard as you might think, and you DO NOT need a to create a div for each thumbnail image. Consider this. You can create two divs, one for the big image, and another one for all of the thumbnail images. Then insert all of the thumbnails in that one div, each separated by a single space. Then use a style to add as much space as you want between each image.

A compound style works well here. Ex: Create a class style for the div called .thumbnails, then create a compound style called .thumbnails img and set the margins to something like 10 pixels on the left and right, or top and bottom (depending on your design). That will put 20 pixels between each image. It’s like magic how that works instantly to spread the images apart, and it’s super easy to change if you decide you want more or less space between your thumbnails later.

I hope that helps you find the best solution for your website.

Janine