JQuery_ Novice to Ninja - Earle Castledine [42]
Traditionally, this sort of debugging is often achieved with the trusty old alert method. For example, if you need to to know what value the code has stored in the top variable, you type alert(top);. But this interrupts the flow of the program—and forces you to close the alert before continuing. And if the code you’re interested in is in the middle of a loop, you might wind up having to close a lot of alerts.
Thankfully, web development tools are constantly advancing, and if you use the excellent Firebug plugin for Firefox (introduced back in Chapter 2), you can take advantage of the built-in debugging options. One of Firebug’s most handy features is the console, where instead of alerting the value of variables, you can use the command console.log:
chapter_04/01_lightbox/script.js (excerpt)
console.log(top,left);
Just open the Console tab of Firebug (you may need to enable it first), and you’ll see the values displayed. No more annoying alert windows! You can specify as many variables or expressions as you would like in a single statement by separating them with commas. The outputs generated by different types of log statements are depicted in Figure 4.2: two simple string outputs, a multivariable output consisting of two numbers, and a jQuery selection.
Figure 4.2. The Firebug console
If the variable is a JavaScript object, you can even click on it in the console to examine its contents. If it is a DOM node or jQuery object, clicking on it will highlight it on the page and jump to it in the Firebug DOM tree.This will save your sanity when you’re stuck on those obnoxious bugs! Just remember to remove any console.log lines from your code when you release it.
ColorBox: A Lightbox Plugin
Our custom lightbox is a fine solution for our modest needs, but you’ll have to admit that it’s fairly limited as far as features go. Sometimes you’ll need more. The principal contender for “more” for quite some time has been Cody Lindley’s ThickBox. ThickBox has certainly fought the big fights, but like all true champions, you have to know when it’s time to step out of the ring and hang up the gloves.
ThickBox is still a powerful plugin and suits many developers despite the fact that it’s no longer maintained. It did what it did, and did it well. It’s precisely that level of quality that has set the bar high for a new generation of lightbox plugins. Let’s take a look at one of the big challengers: ColorBox.
ColorBox is the brainchild of Jack Moore, and with an array of public methods and event hooks—and a staggering 37 options to choose from—it’s likely that even seasoned users won’t touch on everything it has to offer. Given ColorBox’s focus on standards-based XHTML, reliance on CSS for styling, and wide support of content options, it’s easy to see that the “lightweight” tag line on its web page refers only to its tiny 9KB footprint—and not to its huge feature set!
Grab ColorBox from the download area of the web site and examine its contents. There’s a directory called ColorBox that contains both the minified and uncompressed version of the plugin code. As usual, you should use the minified version unless you’re keen to understand the inner workings of ColorBox.
Also included in the download are a number of example directories; the examples all use the same markup and JavaScript code, but show how the lightbox can be styled to look completely different. The best way to start out is to have a look at the examples and choose the CSS file (and corresponding images) that you like best, and then build on that for your implementation.
We’ve copied over the CSS and image files from one of the example directories, and included both that CSS file and the minified plugin file in our HTML:
chapter_04/02_colorbox_plugin/index.html