JQuery_ Novice to Ninja - Earle Castledine [48]
Finally, we hide the current image and fade in the next one. We also swap the show class from the old photo onto the new one, and set a timeout for the slideShow method to call itself again after three seconds have passed.
True Cross-fading
Our last solution looks nice—but it’s just a fade, rather than a true cross-fade. We want to be able to truly cross-fade: as the current picture is fading out, the next picture is fading in. There is more than one way to skin a jQuery effect, and the approach we’ll take for our implementation is as follows:
Stack the images on top of each other, so that the picture with the highest z-index will be showing.
Fade out the top image so that the next image appears to fade in.
Once the fade has completed, reorder the z-index of the images so that the current image is on top.
Repeat steps 2 and 3.
A disadvantage of this technique is that we’ll be stacking the images on top of each other, so they must all be the same size. This usually is a small issue, as it’s fairly common on the Web to be constrained to a certain area. It should also be noted that it’s very easy to switch out the images for divs and be able to cross-fade any HTML in their place.
Note: z-index
z-index is a CSS property used to specify the visual stacking order of an element. Elements with higher z-index values will appear in front of those with lower values. This can be used in conjunction with absolute or relative positioning to stack elements on top of each other.
Looking back at our outline, you should be able to tell that steps 1 and 2 are straightforward. Let’s start by stacking up our images:
chapter_04/07_slideshow_cross_fade/index.html (excerpt)
…
We need to position the images absolutely and contain them within a bounding box:
chapter_04/07_slideshow_cross_fade/style.css (excerpt)
#photos img {
position: absolute;
}
#photos {
width: 180px;
height: 180px;
overflow: hidden;
}
Now that our images are stacked, let’s step back and do some planning. In order to be able to execute step 4 (repeating the fade for the next image), we’ll need to put our fading code in some sort of loop. As the loop needs to keep track of the current photo, we’re going to move our code out into a named function, which we’ll call from our $(document).ready block:
chapter_04/07_slideshow_cross_fade/script.js (excerpt)
$(document).ready(function() {
rotatePics(1);
}
Now we’ll create the rotatePics function, which will do all the hard work. This method accepts a number, which should be the index of the current photo. We’ll see how this is used shortly, but first, we store the total number of photos in a variable. We do this because we’re going to be reusing it a few times in the code—and storing it in a variable means jQuery is spared from wasting time doing the same calculations over and over:
chapter_04/07_slideshow_cross_fade/script.js (excerpt)
function rotatePics(currentPhoto) {
var numberOfPhotos = $('#photos img').length;
currentPhoto = currentPhoto % numberOfPhotos;
…
}
The second line of code is a common JavaScript trick for ensuring that values are confined to a given range. We never want the currentPhoto to be greater than the total number of photos, so we perform a calculation to ensure that the index of the photo we passed in is valid—by taking the modulus of the length. Modulus, represented in JavaScript by the % symbol, returns only the remainder of a division. So if we have five photos in total, and we pass in an index of six, the operation gives 6 % 5 = 1. The number is effectively wrapped around back to the start, and we can be sure we’re never trying to display a photo that’s nonexistent!
Now we can finally proceed with doing the actual cross-fade. As we described in our outline, the effect works by fading