JQuery_ Novice to Ninja - Earle Castledine [49]
We use jQuery’s eq traversing command to grab the current photo. eq—short for “equals”—selects the element from a group whose index is equal to the number we pass in. We pass it our currentPhoto variable to select the current image. With the image selected, we simply fade it out and run a callback function to take care of the setup for the next fade:
chapter_04/07_slideshow_cross_fade/script.js (excerpt)
$('#photos img').eq(currentPhoto).fadeOut(function() {
// re-order the z-index
$('#photos img').each(function(i) {
$(this).css(
'zIndex', ((numberOfPhotos - i) + currentPhoto) %
↵numberOfPhotos
);
});
$(this).show();
setTimeout(function() {rotatePics(++currentPhoto);}, 4000);
});
There are a few things happening here. First, we do a bit of math to reorder the images. We offset each photo’s index by the currently displayed photo index. Then our new modulus trick is put to use again, and the end result is each image’s z-index shuffled along by 1. To see this in action, open up Firebug and inspect the images as the effect is running: you’ll see the z-index properties shuffling each time a new image displays.
Once we’ve completed the reordering, the picture we just faded out will be on the bottom of the pile. This means that it’s safe to show it again, ready for the next time it rises to the top: an easy $(this).show().
Then there’s a call to the timer function setTimeout to set up the function to be run again after a delay of 4,000 milliseconds. We pass it the next photo’s index by writing ++currentPhoto.
Important: Increment and Decrement
In JavaScript, if you follow or precede a numeric variable with -- or ++, the variable will be decremented or incremented by 1, respectively. This is a handy shortcut for the -= and += operators we’ve already seen.
The difference between ++a and a++ is subtle, but important. If you are using it in your code, the first form (with the ++ or -- preceding the variable name) will increment the variable before returning it. The second form will return the unmodified value, then increment it.
In our code above, we want to call our function with the new incremented value, so we use ++currentPhoto.
Feel free to experiment with the type of effect; as well as fades, you can try using the slideUp effect, or one of the jQuery UI effect plugins.
Advanced Fading with Plugins
As you’d imagine, there are countless jQuery plugins already built for transitioning between images. If you have some advanced requirements (sometimes you just need to have a starburst wipe), heading straight for the plugin repository could be a good idea.
Tip: Before Using a Plugin
Many jQuery plugins you find on the Web were developed quite some time ago, and have been more or less abandoned since then. Without continued development and improvement, they’ll often be comparatively slow and buggy. It’s always a good idea to try to understand what you’re adding to your site, instead of blindly including a half-dozen plugin files. If the code is heavy (in terms of file size) and has a lot of functionality unnecessary for your requirements, perhaps a more lightweight, tailor-made solution is in order.
That said, many plugins provide excellent, well-documented code that will save you enormous amounts of time and effort. Just be sure to adequately consider your options!
Now we’ll look at two plugins you can use to achieve a slideshow effect; one is extremely lightweight, while the other has more features.
News Ticker with InnerFade
InnerFade is a tiny plugin that lets you transition between a series of elements, much like the fading image gallery we just built. It does have a few benefits over our code that makes it worth considering. For one, it’s a plugin—which means it’s easy to drop in wherever we need it. Of course, we can easily turn our code into a plugin too (just jump to the section called “Plugins” in Chapter 9 to see how easy it is). It also has some extra options that give us more flexibility: