How to make a changing background using jQuery

Hey Guys,

In my last thread I asked for suggestions for a changing background.

It was suggested that I try a supersized jQuery Plug-in from www buildinternet (dot) com (slash) project (slash) supersized (slash)

I couldn't make it work so I'm hoping there's someone out there smarter than me that has... or can give it a go and let me know their results. The instructoions I got from TomTom are below:

In WD7 you MUST make page background to transparent and background (workspace) also to transparen and disable page cliping and use the overflow tweak.

The changing background you cann only see after you did export to a local folder! This folder must contain subfolders with

/css [put here supersized.css]
/js [put here js jquery.xxxx.min and supersized.xxxx. js]
/slideshow [put here the pictures]


Also put the code in placeholder in head section:

-----------------------------------------------

<script type="text/javascript">

jQuery(function($){
$.supersized({

//Functionality
slideshow : 1, //Slideshow on/off
autoplay : 1, //Slideshow starts playing automatically
//start_slide : 1, //Start slide (0 is random)
//random : 0, //Randomize slide order (Ignores start slide)
slide_interval : 5000, //Length between transitions
//transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
//transition_speed : 500, //Speed of transition
//new_window : 1, //Image links open in new window/tab
//pause_hover : 0, //Pause slideshow on hover
//keyboard_nav : 1, //Keyboard navigation on/off
//performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
//image_protect : 1, //Disables image dragging and right click with Javascript
//image_path : 'img/', //Default image path

//Size & Position
//min_width : 0, //Min width allowed (in pixels)
//min_height : 0, //Min height allowed (in pixels)
vertical_center : 0, //Vertically center background
//horizontal_center : 1, //Horizontally center background
//fit_portrait : 1, //Portrait images will not exceed browser height
//fit_landscape : 0, //Landscape images will not exceed browser width

//Components
//navigation : 1, //Slideshow controls on/off
//thumbnail_navigation : 1, //Thumbnail navigation
//slide_counter : 1, //Display slide numbers
//slide_captions : 1, //Slide caption (Pull from "title" in slides array)
slides : [ //Slideshow Images
{image : 'slideshow/img_1.jpg'}
, {image : 'slideshow/img_2.jpg'}
, {image : 'slideshow/img_3.jpg'}
, {image : 'slideshow/img_4.jpg'}
, {image : 'slideshow/img_5.jpg'}

]

});
});

</script>

------------------------------------------------------------------

!!! look for exact picture source and correct them in {image : 'slideshow/img_1.jpg'} !!!

Aditional you can read the post from John (Covoxer) and his code sample in my thread:

Thread: (WD7Pro) Full wide header & footer in combination with sticky footer [JS question]

[CENTER]****

If you do get it to work can you could pretty pretty please do a quick example and upload a zip file with .xar, .htm, .js etc?

Nothing fancy... just so I can follow what you've done? :D