jump to navigation

Ahhh, Springtime… May 19, 2011

Posted by flutebrarian in Web Design.
Tags: , , ,
trackback

Ahhh, Springtime. A time when a girl’s thoughts turn to … golf!

I was recently contacted to create a website for a regional women’s golf club. Since I’m not one who has ever hit a golf ball beyond the mini-putt course, I went into student mode and learned all about handicaps, team play, and standing rules.

But even though I know very little about the game, I enjoy the beauty of the lush grass courses on which the game is played. How about rotating pictures of the various clubs in the league? They liked the idea.

I was thinking in terms of a small rotating gallery done with a JavaScript file I had used several times before. No, they’d rather have a full header for the page fading in and out of the various clubs.

Time to search for a new script.

At first I found a php script that randomly changed the background image every time the page was refreshed or reloaded. This was a snap to put in place – download php, create image directory, put all images and php in this directory, point the CSS file to the script and you’re done. You can add and delete images without having to alter any code in the script, CSS, or HTML.

But it didn’t fade in and out. So back to the drawing board and this time a new JavaScript.

This time, I found an image cross fader from slayeroffice.com. Although it wasn’t as straightforward as the php script, it was much more robust and the images fade in and out quite nicely. And changing the setTimeout value from 1000 to 5000 increased the fading time between images from 1 second to 5 seconds so one doesn’t get dizzy from the changing golf course images.

There are two CSS files and one JavaScript file to download. The images to be used are listed one after another in the HTML file where the fading images are to appear. So, there is more maintenance involved if the images are added or deleted.

But the client likes it, and that’s what counts.

Advertisements

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: