Fading between looping background images using jQuery

Question

I am trying to get a background image of an inherited div (by which I mean that it already has a background image that I can’t control and therefore must rewrite initially) so that it fades between new images indefinitely. Here is what I still have:

var images = [ "/images/home/19041085158.jpg", "/images/home/19041085513.jpg", "/images/home/19041085612.jpg" ]; var counter = 0; setInterval(function() { $(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")'); counter++; if (counter == images.length) { counter = 0; } }, 2000); 

The problem is that it is not smooth (I am aiming for something like the innerfade plugin).

EDIT: the question initially said, "and it is not vague (it passes only once through the array)., But Mario corrected my dumb naming error.

EDIT2: Now I am using Reigel's answer (see below), which works fine, but I still can’t find a way to smoothly transition between images.

All help is respectfully appreciated :)

Answer 1

After long experiments, I am forced to answer my question in the negative - that is, at the moment I am 99% sure that this is impossible.

I have to say that my situation is not ideal in that the div that I am trying to fade away has other html content for it. If this is not the case, then a combination of Reigel’s code and Mario’s last sentence will certainly work, namely:

• After the Reigel Code
• Remove the background of the inherited div.
• Insert a new div with a lower z index.
• Add foreground images to this new div.
• Navigate using the library of your choice.

Although it would be easier to use jQuery to remove the old div background, and then insert the images into the 'foreground' div.

In any case, just leaving it in case someone tries to do the same. Plus I hate unanswered questions :)

Answer 2

Preload images before setting backgroundImage, and also replace

 if (counter == colours.length) { 

from

 if (counter == images.length) { 

EDIT: Attenuation between images (note that I am not saying a background image) is done using two images and changing the opacity until one becomes invisible and the other not. This means that you need to have two images at the same time for a short time. This is not possible if you just use the same background image.

You can try to remove the background image from an existing div

 $(".home_banner").css({'backgroundImage':''}); 

and placing img elements (using a lower z-index) and their fading inputs and outputs. Perhaps you can even use the innerfade plugin on them and let this handle the attenuation and loop for you.

Answer 3

You need to upload the image first and then switch to it

jQuery fades with a new image: jQuery fades with a new image

Answer 4

try it...

 var images = [ "/images/home/19041085158.jpg", "/images/home/19041085513.jpg", "/images/home/19041085612.jpg" ]; var counter = 0; setInterval(function() { $(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")'); $('<img>').attr('src',images[++counter]); // preload the next image if (counter == images.length) { counter = 0; } }, 2000); 

Answer 5

 var bgrotate = function(imgpool, tg){ var imgs = imgpool, loader = new Image(), domelements = new Array(), current = 0, target = tg; return { preload: function(){ for(var i=0; i<imgs.length; i++){ loader = new Image(); loader.src = 'url("' + imgs[i] + '")'; alert(loader); domelements.push(loader); } }, rotate: function(speed){ tg.delay(speed).show(1, function(){ tg.css('backgroundImage', domelements[current].src); current = (current < domelement.lenght ? current++ : 0); } }, stop: function(){ tg.stop(true, false); } } } $(document).ready(function(){ var myobj = new bgrotate(['http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif', 'http://sstatic.net/so/img/logo.png'], $('#mydiv')); myobj.preload(); myobj.rotate(); } 

myobj.stop() terminates the loop. It is untested, but something like this should work.

Answer 6

Just put -webkit-transition:1s; into your CSS for the class in which you change the background.

It worked for me.