"Actions speak louder than words…"
The sixteenth century writer, Michel de Montaigne, is often quoted with inventing this phrase, which the author believes is quite apt for jQuery Tools—after all, the best way to learn about new tools is to try to use them, right?
In the previous chapter, we learned a little about the whole ethos of jQuery Tools, and that the emphasis is placed less on the JavaScript code, but more on the ability of tools to be styled in lots of different ways, by changing the CSS and altering some of the configuration options of the tool being used.
It is time now to look at some of these tools in detail—this chapter (and the next) contains a number of projects which use various tools and showcase a bit of what can be achieved by using CSS and minimal JavaScript.
In this chapter we shall learn how to:
- Build a map lightbox effect using Google Maps
- Build a simple gallery, that showcases a number of images
- Construct a quicklink tooltip, to allow the purchase of a book
- Display images in a Polaroid-styled slideshow
So, as someone once said…"What are we waiting for..?" Let's get on with it...
Note
All of the images listed in this chapter's examples are available in the code download that accompanies this book.
Before we look at the examples in detail, let's set up the basic framework that will be used in each project. Open up your favorite text editor, and copy the following code:
<!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script> <script src= "http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"> </script> </head> <body> </body> </html>
Save this as a template—the demos in this book use a similar format, so this will help you save time later, when we look at some of the other tools available as part of the jQuery Tools UI library. Let's begin with overlays.