<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
  jQuery.jQueryRandom = 0;
  jQuery.extend(jQuery.expr[":"], {
    random: function(a, i, m, r) {
      if (i == 0) {
        jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
      };
      return i == jQuery.jQueryRandom;
    }
  });
</script>
<script type="text/javascript">
$().ready(function() {
  var a = $("table.ms-summarystandardbody td.ms-vb2 a:random");
  a.parents("div[id^=WebPart]").html('<img src="' + a.attr("href") + '"/>');
});
</script>

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:

That’s all!

Each time you load this page another image will be picked and displayed.

What’s next?

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.

Summary

Providing custom functionality doesn’t necessarily have to mean development and deployment. By just extending the standard SharePoint functionality with JavaScript you can easily create great features which can enhance the overall experience of your application. Using the jQuery framework you can simplify creating these enhancements even more. jQuery covers for you all the basics and allows you to focus on the functionality you to provide to your users.