Saturday, January 24, 2009

Photo “Badge” for Web Site

Good evening,

For those of you who have visited our web site (www.cityescapesphotography.com ), you are sure to notice the badge at the top of our home page (the banner where pictures are dynamically filled in). This badge is similar to the common Flickr badges that have started to appear around the web. However, it is not directly associated with Flickr. This piece of Javascript was written by Joe Tan and is available open source at http://tantannoodles.com/toolkit/flickr-dhtml-badge/ (Our thanks to Mr. Tan!)

This script has a couple of important advantages over the classic Flickr badges. First, and most importantly, it can use images from anywhere on the web. You tell the Javascript which images to use and it displays them in random order. This was extremely important to us because it meant that we did not need to have a Flickr site in addition to our primary web site just to host images for the badge. This allows people who click on the image to go directly to our detail page which provides more information about the image and allows orders to be placed. This also minimized synchronization issues by ensuring the badge and the underlying pages point to the same images.

The second advantage this script has is its flexibility. You can specify exactly how large to make the banner, the size of the individual images, how many images appear, what the shape of the badge is, how often new images appear, and how often the entire badge is cycled through before going dormant. This level of flexibility was much greater than provided by the official Flickr badges that I had looked at when deciding what type of badge to use.

I have had no problems incorporating the badge into our site, and have tested it on both Firefox and IE without any problems (although I will note that IE requires Javascript to be placed outside of tables). I would highly recommend this badge for anyone looking to add a little interaction to their web pages without any serious coding.

Terence

www.cityescapesphotography.com

No comments: