First of all apologies to my cat of 15 years, Scooter. The title above is obviously in jest .. a saying my parents and grandparents used to use whenever they had a particularly unique or personal way of doing something. My grandparents were all farmers, and if there is anyone who knows how to improvise and figure things out on the fly, it’s a farmer. That sort of goes for web developers too.

I’m knee deep in a brand new site for a charity golf tournament. To see my work go here: http://www.friendsforlawson.com. I have a photo page that is .. well .. full of photos. But at the moment they are in a sort of linear, straight down the page format. Somewhat jumbled in size as well. I did this because honestly I was in a hurry to get the site live and didn’t want to spend hours (days?) formatting a slideshow or gallery. But now the site has been live for about a week and I’m largely unsatisfied with the look of the photo page. What to do?

The choices are pretty varied and somewhat predictable. There is the good old standard slideshow. The kind where the user clicks a thumbnail to change the featured picture. Or the kind where the user clicks a “next” button or arrow to change the featured picture. There is the “mouseover” option where there is a page of thumbnails and a simple hover of the mouse enlarges the thumbnail or even changes the feature picture. Also don’t forget a simple fading slideshow. The user doesn’t get much interaction with these, though. I’m not a fan myself.

Most of the above shows are formatted using some form of javascript or jquery. There is also Flash to consider but since all indications are that Flash is going away, or at the least deprecating, then I think I will avoid it at this time. So where does that leave me?

I think perhaps the easiest one to create and easiest for the average user to navigate is a simple page of thumbnails that are larger in size than a typical slideshow. Large enough to get a good look at the picture but small enough to make you want to see the picture larger or in its original size. A simple guide/hint at the top of the page tells the viewer to click each thumbnail to enlarge the image. When the thumbnail is clicked on, a simple javascript command opens a larger version of the picture in a new window on top of the existing page. At the bottom of this image there should ideally be “close” link or an “x” or both.

So now that I know what I want to ultimately accomplish, I have a lot of work to do. Here’s a simple outline of where I go from here:

1. Determine size of thumbnails for Photos page.
2. Resize all the pictures to a uniform thumbnail (being sure to “save as” to preserve the original image).
3. Place thumbnails on page in three columns ideally. Use class divs for each picture, all left floated.
4. Add guide text at top of page to instruct visitor how to enlarge the pictures.
5. Don’t forget clearing element after each row!!
6. Write a simple javascript command to open a new page when each thumbnail is clicked on. Add a “close” link at bottom of each new page.
7. Add script to each thumbnail in code.
8. Test all images for functionality in various browsers.
9. W3C validate and cross browser check.
10. Upload photos.html page, thumbnails, style sheet and javascript.
11. Test again.
12. Enjoy my new page!!

So that’s next on my agenda!! Stay tuned for updates when the page is complete.

In all things be creative,

Todd