Showing random images in SharePoint 2007 using jQuery
Showing random images: the ingredients
There are two things we need to display random images. First of all an image library with some images in it. It doesn’t matter how many or what kind of images you put in there: it’s okay as long as they are viewable in the browser.
Let’s see some random images
For the purpose of this case I have created a publishing site. The template you choose doesn’t really matter. A WSS3.0 Blank Site would do as well. I’ve uploaded some random photos I’ve found on Flickr to illustrate how it all works.
As soon as the images list is done, let’s proceed to the page.
Let’s start off with putting on the page the List View Web Part of the Images list:
Nothing special here. Now let’s do the magic. Let’s add a Content Editor Web Part, edit it, and paste in the Source Editor the following piece of HTML:
What it does? First of all I extend the jQuery framework with the “:random” filter which allows me to pick a randomly chosen element. Then, as soon as the page has been loaded I select all the links from the Images Web Part and pick a random one to display. The last thing I do is to substitute the list of images with the random image I’ve just picked:
Each time you load this page another image will be picked and displayed.
The example I’ve presented is quite simple. Because we’re using a common SharePoint list here, you could store some metadata together with the images and make them appear on the page as well. You could extend the script to add the title, description and maybe even a link to a different site: the sky is the limit.