[Solved] Fade In / Fade Out background images without white background

I want to create a website with background images that change over time with a fade in/fade out effect, but I don’t want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named Maximage that suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?

Here’s my HTML code:

<div id="wrapper">
//My contain here
</div>

Here’s my JavaScript code so far:

//Auto change Background Image over time
$(window).load(function() {
   var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
    var i = 0;

    function changeBackground() {
        $('#wrapper').fadeOut(500, function(){
            $('#wrapper').css('background-image', function () {
            if (i >= images.length) {
                    i = 0;
                }

                return 'url(' + images[i++] + ')';
            });
            $('#wrapper').fadeIn(500);
        })      
    }
    changeBackground();
    setInterval(changeBackground, 3000);
});

Example: http://www.aaronvanderzwan.com/maximage/examples/basic.html

Enquirer: Lee

||

Solution #1:

AHH ! Finally ! I found a nice technique ! I’m using a double wrapper.

The problem in your code is a bit logical. You can’t fadeOut and fadeIn at the same time a single wrapper.

So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: “wrapper_top” that encapsulate the second wrapper called: “wrapper_bottom”. And the magic was to put beside the second wrapper: your content.

Thus having the structure ready which is the following:

<div id='wrapper_top'>
    <div id='content'>YOUR CONTENT</div>
    <div id='wrapper_bottom'></div>
</div>

Then a bit of JS+CSS and voilĂ  ! It will be dynamic with any amount of images !!!

Here is the implementation: http://jsbin.com/wisofeqetu/1/

Respondent: Lee

Solution #2:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(window).load(function() {           
  var i =0; 
  var images = ['image2.png','image3.png','image1.png'];
  var image = $('#slideit');
                //Initial Background image setup
  image.css('background-image', 'url(image1.png)');
                //Change image at regular intervals
  setInterval(function(){   
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000);            
 });
</script>
</head>
<body>
      <div id="slideit" style="width:700px;height:391px;">  
      </div>
</body>
</html>
Respondent: Yves Lange

Solution #3:

If it doesn’t have to be background-image, you can place all the images in your #wrapper, in <img>, it will work like a charm:

<div id="wrapper">
   <img src="firstImage" class="imageClass"></img>
   <img src="secoundImage" class="imageClass"></img>
   <img src="thirdImage" class="imageClass"></img>
</div>

then some style. Every image has to be in same spot, so add position relative to #wrapper, and position absolute to .imageClass:

#wrapper{
   position: relative;
}

.imageClass{
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

display: none; will hide every image.

Now some JQuery. To appear first image when window load write this:

$(window).load(function() {
   $('.imageClass').eq(0).show();
});

by the .eq() “command” you can specify which one element with class ‘.imageClass’ you want to use exactly. Starts with 0. After that just do something like that:

 function changeBackground() {
    var current = 0;
    //tells which image is currently shown
    if(current<$('.imageClass').length){
       //loop that will show first image again after it will show the last one
       $('.imageClass').eq(current).fadeOut(500);
       current++;
       $('.imageClass').eq(current).fadeIn(500);
    } else {
       $('.imageClass').eq(current).fadeOut(500);
       current=0;
       $('.imageClass').eq(current).fadeIn(500);
    }
 }
    changeBackground();
    setInterval(changeBackground, 3000);
});

That should work, hope you will like it.

Respondent: CYRIL

Solution #4:

You may also use jQuery plugin backstretch.

Respondent: Luke

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.