How do I make a changing background like this one?

[Younique]

Hey Guys,

My first ever post.

Does anyone have an idea on how I can create a changing background like the one on this website? http://*******.com.au/ without using flash?

Thanks a bunch!

Ryan

[ShapeShifter]

Look at the source Ryan, you'll see how it's all controlled via some javascripts.
If you can find the scripts online (free or paid for) you may be able to add them to your xara pages via placeholders.

But if you are asking can this be done natively in Web Designer -- then the answer is no.


By the way. Your first ever post appears to have been last november (cool logo too I might add)

[Younique]

Thanks.. I meant my first ever thread! Oops

I'll see what I can come up with. I've tried isolating the code I need for it with no luck. Is there a file I have to add as well do you think?

[ShapeShifter]

I have no idea Ryan -- the URL you posted was moderated.
Maybe you could explain in more detail?

[Younique]

Oh... I'll describe the website... it's IRP Artchitects dot com dot au. How's that?

[TomTom2009]

You can do this with jQuery plugin "Supersized".

Google for ""supersized jquery" or go to page:

www buildinternet (dot) com (slash) project (slash) supersized (slash)

Put the code into a placeholder in header, read documentation or analyce the source code on the sample (demo) pages.

I did made a site already with WD7Pro and Supersized.

Tom

[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?