Documentation:UBC Content Management System/CLF Theme/Insert rotating images when the web page refreshes using jQuery

Under construction

Step 1:

Create a custom field called: custom-javascript

Step 2:

In the custom field value, insert the following code and replace IMAGEURL with the file reference of your images on your web site:

var images =new Array("IMAGEURL","IMAGEURL","IMAGEURL","IMAGEURL","IMAGEURL","IMAGEURL");

jQuery("#random-image").html("<img src="+images[Math.floor(Math.random()*7)]+" />");

Example:

var images =new Array("/files/2010/12/painted_hands1715.jpg","/files/2010/12/school1718.jpg","/files/2010/12/kneeling1714.jpg","/files/2010/12/painting1716.jpg","/files/2010/12/chris1712.jpg","/files/2010/12/harold1713.jpg","/files/2010/12/bunny1711.jpg");

jQuery("#random-image").html("<img src="+images[Math.floor(Math.random()*7)]+" />");

Step 3:

Add a div tag id="random-image" to the body of your page or post