Change background images of div

JavaScript
1

I have a div that contains a background image as below:


<div id="custom_header">
<div class="container"></div>
</div>

#custom_header {
 background: #111 url(../images/i-z8tkQD5-XL.jpg) center 80px;
 background-size:cover;
 /*background-size:contain;*/
 /*background-size:auto;*/
 overflow: visible;
 background-repeat:no-repeat;
 height:770px;
}

Which is fine, works great, but what I would like to do now is rotate a few images but keep them as background images.

So I tried the code below and it worked but its not very friendly in that its basically very quick fade in and out, no sort of feeling to it, I would liek it to fade in and out slowly, or to give a bit of atmosphere to the process.


<script>
jQuery( function( $ ) {
    var images = [ "./images/i-z8tkQD5-XL.jpg", "./images/i-XQXfTbj-XL.jpg", "bg-3.jpg", "bg-4.jpg", "bg-5.jpg" ];
    var currentImage = 0;
    function changeBackground() {
        $( '#custom_header' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
        if ( currentImage >= images.length - 1 ) {
            currentImage -= images.length;
        }
    }
    setInterval( changeBackground, 5000 );  
});
</script>
#custom_header {
 background: #111 center 80px;
 background-size:cover;
 /*background-size:contain;*/
 /*background-size:auto;*/
 overflow: visible;
 background-repeat:no-repeat;
 height:770px;
}

Could someonw help me with the fade in and out or perhaps even sliding

2

It’s fine to do this yourself, but it’s worth considering using something like jQuery Cycle, too, which has done all the work for you.

3

you should not use setInterval, setTimeout is better…

function changeBackground() {
$( ‘#custom_header’ ).css( { backgroundImage: ‘url(’ + images[ ++currentImage ] + ‘)’ } );
if ( currentImage >= images.length - 1 ) {
currentImage -= images.length;
}
setTimeout( changeBackground, 5000 );
}
setTimeout( changeBackground, 5000 );

4

OK I checked out the jquery site and one of the basic transitions is perfect, but they have an example where the images arent set a sbackground images, so could someone help me integrage below into what I already have, so I can keep the images as background images, but use the fade cycle from jquery.


[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]<
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]script[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]type[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="text/javascript"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]src[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]script[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE][/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]<!-- include Cycle plugin -->

[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]<
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]script[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]type[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="text/javascript"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]src[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="http://malsup.github.com/jquery.cycle.all.js"></[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]script[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE][/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]
<
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]script[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]type[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="text/javascript">[/COLOR][/SIZE][/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]$(document).ready(
[/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]function[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]() {[/SIZE]
[SIZE=2]
    $(
[/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]'.slideshow'[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]).cycle({[/SIZE]
[SIZE=2]
		fx: 
[/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]'fade'[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]// choose your transition type, ex: fade, scrollUp, shuffle, etc...[/COLOR][/SIZE][/COLOR][/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]	});

});

[/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff][/COLOR][/SIZE][/COLOR][/SIZE] 
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff][/COLOR][/SIZE][/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff][/COLOR][/SIZE][/COLOR][/SIZE]