There are times when one wishes to add just a “simple” static photo to improve feel and presentation of our/client’s site or photo blog. The idea usually goes like this:
- I have a series of images that I want to display on my website.
- I do not need a slideshow.
- I just want to display one image (on the page load) and I want to grab it at random.
- My site is either based on WordPress theme or it is just a plain xhtml site.
To accomplish this task, three web components are needed: html, css, and some sort of JavaScript. For the latter, I picked jQuery library which is well suited for this task. In addition, other standard web technologies will be used, such as JSON and Ajax.
[space]
Prerequisites:
For the following part, we will need to be comfortable with a simple editing of html code, preparing JSON list of our photos, including jQuery/Ajax script, and with a little bit of css styling.
[space]
[space]