JQuery_ Novice to Ninja - Earle Castledine [43]
ColorBox can work on a single image as we did in the previous section, but it excels at displaying slideshow-style galleries—letting the user move between the images, as illustrated in Figure 4.3. To take advantage of this we need to group the images we want to show, and ColorBox expects us to do this with the rel attribute of our links.
Figure 4.3. A styled gallery using the ColorBox plugin
In the markup, we’ve included rel="celeb" on all of the images we want to group together. Now we can use the jQuery attribute selector to find those images: a[rel="celeb"]. Calling the colorbox method on the selection gives us a fantastic-looking lightbox:
chapter_04/02_colorbox_plugin/script.js (excerpt)
$(document).ready(function() {
$('a[rel="celeb"]').colorbox();
});
It looks and works briliiantly by default, but there are stacks and stacks of options to play around with. In the following example we give it a fading transition, rather than the default elastic resize (the speed option, as you might have guessed, specifies the duration of the fade). To suit the StarTrackr! style, we’ll also customize the wording of the lightbox text. This is just the tip of the iceberg, though—poke around on the ColorBox site to explore all the other options and events available for customizing the lightbox:
chapter_04/02_colorbox_plugin/script.js (excerpt)
$('a[rel=celeb]').colorbox({
transition: 'fade',
speed: 500,
current: "{current} of {total} celebrity photos"
});
What’s great about ColorBox is that it’s highly unobtrusive and customizable: you can alter behavior settings, add callbacks, and use event hooks without modifying your markup or the plugin’s source files. ColorBox preloads any required images— and can even start preloading your gallery images—so it always appears snappy on your pages. And last, but by no means least, ColorBox is released under the permissive MIT License—so you can use it in your commercial projects as you see fit.
Cropping Images with Jcrop
While we’re looking at mature and excellent plugins and lightbox effects, we’d be remiss if we skipped over the Jcrop plugin for defining regions of an image. The plugin adds a lightbox-style overlay on an image and lets the user drag a rectangle to select a required area of an image. This functionality is common on many large web sites, where it allows users to crop an uploaded image for their profile picture.
If you know a little about image manipulation on the Web, you’re likely to know that image manipulation of this sort usually takes place on the server side. Right? Yes, that’s correct—the Jcrop plugin doesn’t actually crop images, it provides an intuitive interface for defining the bounding edges where the user would like to crop an image. The results returned from the plugin can then be fed to the server to perform the actual image manipulation. You can see an image being cropped with Jcrop in Figure 4.4.
Figure 4.4. The Jcrop plugin in action
The typical workflow for using the Jcrop plugin would be to display an image to the user that needs to be cropped (either a stored image or a freshly uploaded one), and overlay the Jcrop interface. When the user has made their selection the coordinates are posted to the server, where the resulting image is created and saved for display or download.
To apply the Jcrop interaction, you first need to download it and extract the files. Contained in the download bundle is the Jcrop JavaScript file, a small CSS file, a clever animated GIF (that’s responsible for the “moving lines” effect when you select a region), and some demo pages that highlight all of Jcrop’s features.
You’ll need to include the CSS (at the top of the page) and JavaScript (at the bottom of the page) files. The Jcrop.gif image should be in the same directory as your CSS file:
chapter_04/03_jcrop/index.html (excerpt)