Custom Background fadeInOut gallery

Question

Because of this, the background images of fadeInOut transitions produce a strange effect in the white texts of all texts. I decided to program my own image rotator with the fadeinout effect

var intervalo; var i= 0; var photos = [ "http://toniweb.us/gm/img/galeria/fondo1.jpg", "http://toniweb.us/gm/img/galeria/fondo2.jpg", "http://toniweb.us/gm/img/galeria/fondo3.jpg", "http://toniweb.us/gm/img/galeria/fondo4.jpg" ]; function rotarFondo(){ var container = $('#headerimgs'); var current = container.children('div:visible:first'); var imgSrc = photos[i]; i++; if(i == photos.length) i = 0; console.log(imgSrc); var next = (current.next().length > 1) ? current.next() : container.children('div:visible'); current.css('background',imgSrc); next.css('background',imgSrc); current.fadeOut(300); next.fadeIn(300); } function congelarFondo(){ } $(document).ready(function(){ if (intervalo ) clearInterval(intervalo ); intervalo = setInterval('rotarFondo()',1000); }); 

interval value and image calculation work fine, but I don’t know why bgImgaes are not actually applied,

Testing here now http://jsfiddle.net/bE9Dq/27/

any idea?

Answer 1

Good for starters, this can save you some time and a few headaches for using one of these plugins:

• http://buildinternet.com/project/supersized/
• http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

(I used both of them)

The first thing I noticed with your code is that you may need to set the background image as follows:

 .css('background-image','url(' + imgSrc + ')'); 

Also, pay attention to the second line ( next. ) imgSrc you are still using imgSrc , I think you want to use imgSrc1 instead?