Rotating page images with a simple HTML solution


This HTML solution randomly displays a page image from a library of images uploaded in a File Area. A different image is displayed on each reload of the page.


To enable rotating page images with this solution follow these steps:


1. Prepare your images with the recommended page image size. The page image recommended size is displayed when you select Custom Image in your Page Image properties.



2. Add all images that should rotate in a File Area on some page from your site. Publish the page.

3. Copy the permanent file URL for each file.

4. Add an HTML Snippet just bellow your page header area.




5. Paste the code below into the HTML Snippet box.




var img_urls = new Array();
img_urls[0] = "U
RL0 ";
img_urls[1] = "U
RL1 ";
img_urls[2] = "U
RL2 ";
img_urls[3] = "U
RL3 ";
img_urls[4] = "U
RL4 ";

var random = Math.ceil (Math.random() * img_urls.length) - 1;
var el = $$('div.pageImage')[0];
if (typeof(el) == 'object') el.setStyle('background-image', 'url(' +  img_urls[random] + ')');




6. Replace the URL0, URL1, etc in the code with your permanent file URLs (step 2). Publish the page.