jQuery Fullscreen Background Slideshow

I recently worked on a project where there was the requirement to implement a full screen/window background slideshow. Rather than just pick one of the many plug-ins out there, I decided to put my jQuery to work and come up with my own solution. What I came up with is very simple.

You can SEE THE DEMO HERE and DOWNLOAD THE CODE HERE.

Firstly the HTML and CSS. We are not applying the backgrounds to the body of the page, we are faking this by putting them in a fixed position, 100% width and height div which will sit behind our content. The images that we put in the background div are also 100% height and width and absolutely positioned on top of each other. The images have a min-width so they are not able to get too small. If the window is resized smaller than the min width, they simply overflow.

<body>
	<div id="bg">
	        <img src="image3.jpg" />
	        <img src="image2.jpg" />
	        <img src="image1.jpg" />
	</div>
	<div class="mainContent"></div>
</body>
body{
	background:#333;
}
#bg{
	position:fixed; 
	top: -50%; 
	left: -50%; 
	width: 200%; 
	height: 200%; 
	z-index: -2;
}
#bg img{
	position:absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	margin: auto; 
	min-width: 70%; 
	min-height: 70%;
}
.mainContent{
	width:300px; 
	height:500px;
	position:fixed;
	right:0;
	top:50px;
	padding:25px;
	background:#fff;
	overflow:hidden;
}

If you take a look at your page now, your background (as the backgrounds are absolutely positioned, they sit on top of each other so you only see the top (last) one in the stack) fills the screen nicely and expands and contracts as you resize the window. All we need to do now is make the slideshow come together with jQuery.

To do this, we just fade out the top most image to reveal the one behind – repeat. When we get to the final image, we fade them all back in again and start over. Simple:

//get the number of images we have to cycle through
var numberOfBackgrounds = $('#bg img').length;
 
//keep track of the current background - we start with the last (top) one in the stack
var currentBG = numberOfBackgrounds;
 
//swap out backgrounds
setInterval(function(){
    if (currentBG == 1){
        //we have reached the last image so we fade them all back in and reset the counter
        $('#bg img').fadeIn(1200);
        currentBG = numberOfBackgrounds;
    }else{
        //fade out the current visible background to reveal the next in the stack
        $('#bg img:nth-child('+currentBG+')').fadeOut(1200);
        currentBG = currentBG - 1;
    }
},
4000);

And there you have a working fullscreen background slideshow.

We can, however improve on this slightly. In it’s current state, it does’t look too appealing while it is loading – You can see all the background images chugging away as they download – so a nice touch is to show a loading overlay until the first visible (last in the stack) image has finished downloading.

Head over to ajaxload.info and generate yourself a loading gif.

You need to insert another overlay div in the same way that you did the background one. This will just have a blank background and a loading gif. We simply show this and then fade it out when the first visible image has finished downloading.

Add the new div into your HTML after your background div:

<div id="bg">
    <img src="image3.jpg" />
    <img src="image2.jpg" />
    <img src="image1.jpg" />
</div>
<div id="bgloader"></div>
<div class="mainContent">
   ......
</div>

.. and update your styles:

#bg, #bgloader{
	position:fixed; 
	top: -50%; 
	left: -50%; 
	width: 200%; 
	height: 200%; 
	z-index: -2;
}
#bgloader{
	z-index: -1; 
	background:url(ajax-loader.gif) center center no-repeat #000
}

If you look at your project now, you will just see the loading overlay. All we need is the jQuery to fade this out when the visible image has loaded and we do this like so:

//to fade out the loader			    
$("#bg img:last-child").one('load', function() {
    $('#bgloader').fadeOut();
  }).each(function() {
    if(this.complete) $(this).load();
});

If you’ve any questions or comments, post them below and I will be glad to lend a hand where it’s needed.

Did you like this post? Why not subscribe?

Leave a Reply

Your email address will not be published. Required fields are marked *