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.
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:
- Determine size of thumbnails for Photos page.
- Resize all the pictures to a uniform thumbnail (being sure to “save as” to preserve the original image).
- Place thumbnails on page in three columns ideally. Use class divs for each picture, all left floated.
- Add guide text at top of page to instruct visitor how to enlarge the pictures.
- Don’t forget clearing element after each row!!
- Add script to each thumbnail in code.
- Test all images for functionality in various browsers.
- W3C validate and cross browser check.
- Test again.
- 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,