How do I make a changing background like this one?

[TomTom2009]

Another sample made with supersized jquery plug in you can see here:

See sample: demotemplates (dot) joomlashack (dot) com (slash) scenica (slash)
(without "www" because subdomain!)

you can also analyse the code to see how to make integration.

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]

Tom

[Younique]

Wow, thanks a bunch!

Will give it a go and post the results. Wish me luck! :-)

Thanks again

[Younique]

Ok, I've downloaded the relevant files and put them in a local folder with the htm files and index_html folder.

I put supersized.3.1.3.min.js and supersized.3.1.3.js in the js folder but couldn't find jquery.xxxx.min (jquery.3.1.3.min.js)

I added the code into the header section of two placeholders (1 with the slideshow code and 1 with the overflow tweak)

I updated the image locations to C:\Ryan\Documents\... \slideshow\xxxx.jpg etc

I made the background tansparent and the work area... I think (I may need clarification on this one)...

... AND it's not working

Have you tried this to see if it works? Is there any chance you could pretty pretty please do a quick example and upload a zip file with .xar, .htm, .js etc? (eyelids flutter)

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