Changing background images like this

Question

If you guys check out this webpage: http://www2.scandvision.se/oresund10/

How have they done this background fade in fade out? When i check the source this

    <img id="wrapper-background" src="images/body-background-0.jpg" alt="Background" />

and i think theres some kind of script maybe php or js, or both, that every 5 sec changes the background: images/body-background-1.jpg

images/body-background-2.jpg

images/body-background-3.jpg

and so on..

So how did they do this? an example would be great, as i want to learn how to do that. If i was going to do something like this i think i would only manage to do a script in php that randomize everytime you refresh.

Thank you, this will expand my knowledge

Answer 1

The jquery cycle plugin is a simple script to do this effect.

Answer 2

They are using mootools framework. Check this out: http://mootools.net/forge/p/slideshow

Answer 3

hi , i think u can have the same effect if u use a jquery plugin called "jquery innerfade"

here is a website when u can get the .js file of it , of course u need jquery to use it

Inner Fade

I hope it will help ;)

Answer 4

Hi I did that one time on a website, I use "Prototype JS" and "Script Aculo US" but you can easily do the same thing without these library. You can see an example here: www.envolulm.fr

I extract below and translate some comment of my code:

/* In my HTML PAGE*/

 <div id="slideshow">
  <p id="text1"><img src="/url/of/your/image1"/></p>
  <p id="text2"><img src="/url/of/your/image1"/></p>
  <p id="text3"><img src="/url/of/your/image1"/></p> 
  <p id="text4"><img src="/url/of/your/image1"/></p>
 </div>

CSS:

#text1, #text2, #text3, #text4 {
  position:absolute;
  height:402px; // you can put other value...here
  width:850px; // you can put other value...here
}

Javascript function

function changeimg(){

var sec = 6000; // Change each 6 secondes
 var paras = $$('#slideshow p'); // Grab element "<p>" of the div with slideshow for ID


 // For each element "<p>"
 paras.each(function(para){
    if(para.visible()){
    paraFade = para; // We stock the item which will disappear
    paraAppear = para.next(); // We got the next element (The one who wants to appear)

       //If it's the last "p" element we come back to the first one
       if(paraAppear == undefined){
        paraAppear = paras[0];
       }
    }
 });
 Effect.Appear(paraAppear); // Script Aculo US animation
 Effect.Fade(paraFade); // Script Aculo US animation
 timer = setTimeout("changeimg()",sec); // Timer

} 

Event.observe(window, 'load', function() { changeimg(); }

Hope that can help you.