Full Image Background Slideshow Part 2 of 3

jQuery Slideshow

full-imageBkgrd2Here we go with Part 2 of 3 for creating a full image background slideshow!

Although it isn’t quite the normal jQuery slideshow we’ve been working on, it’s much of the same coding, so I’ve included it within the Tutorials:

[list_category name=”jQuery Slideshow”]

Goal

In part 2, we’ll add some basic jQuery to our slideshow to make it work. See the jsFiddle at the bottom for the example, although the background image won’t work quite right because of the jsFiddle embed. To view it better, click the link to “edit the jsFiddle”.

Setting up the image arrays for the Slideshow

The first step is to set up the array to cycle through for the slideshow.

slides = new Array();
 slides[0] = "http://kimjoyfox.com/wp-content/uploads/Beijing-2011-5.jpg";
 slides[1] = "http://kimjoyfox.com/wp-content/uploads/Beijing-2011-7.jpg";
 slides[2] = "http://kimjoyfox.com/wp-content/uploads/Beijing-2011-10.jpg";
 slides[3] = "http://kimjoyfox.com/wp-content/uploads/Beijing-2011.jpg";
 slides[4] = "http://kimjoyfox.com/wp-content/uploads/Shanghai_2011-2.jpg";
 slides[5] = "http://kimjoyfox.com/wp-content/uploads/Shanghai_2011-4.jpg";
 slides[6] = "http://kimjoyfox.com/wp-content/uploads/Shanghai_2011-7.jpg";
 slides[7] = "http://kimjoyfox.com/wp-content/uploads/Shanghai_2011-15.jpg";

This is pretty straight forward. We create a new array, and then add each image as a item in that array.

Preload the Images

//preload Images
 $('body').append('<div style="left:-10000000px; top:-10000000px; position:absolute;" id="preloadslides"></div>');
 $.each(slides, function(index, value) {
 $('#preloadslides').append('<img src="'+value+' />');
 });

So our images are good size, and your’s will probably be larger, so it’s important to preload the images. We’re going to add a Div “#preloadslides” to the body tag of the page using append. Additionally, we’ll set the Div’s location to WAY out of the screen.

Then, for each image in the array “slides” (line 3) we add the image to the Div we just created.

Slideshow jQuery Array and Pre-loading Images

We’ve got the slideshow jquery array created and the basic pre-loading of all the images.

The final real magic to making it move will be in Part 3.

A big Thank You to Amber Fox for her fantastic photos of China!

Comments