When we started to re-design Open Library, we knew that we wanted to make it not only useful, but fun to use as well. Obviously, its usefulness as a resource is dependent on its data, the data integrity, and the participation of interested people like you who want to help to build and maintain an online library for everyone to use now and in the future.
A big part of our goal is, therefore, to make it both easy and (hopefully) fun to edit the records, add new books and authors, and enhance the information with lots of interesting bits and pieces, like web sites that talk about those books and authors you’re interested in, excerpts from the works, and just about every piece of info available that anyone might want to know.
The “fun” part is where I came in. George already had a set of designs to use and a very strong sense of how the library should function. Taking it from the flat plane of jpegs into the interactive form of a web site – and attempting to balance her palette and layout with some special effects made possible through the open source Javascript library, jQuery and its companion, jQuery UI – meant finding some simple solutions to complicated questions.
Here’s a list of the jQuery apps we’ve integrated, a little bit about how we altered them for our site when necessary, and how we’re using them.
Colorbox
Thickbox used to be the be-all, end-all of pop-up lightbox apps on the jQuery platform, but it’s no longer maintained. I’ve found Colorbox to be the most versatile and easy to use alternative. Anywhere you encounter a pop-up (for example, when adding a cover to a book or a photo to an author’s page), we’re using Colorbox. In some cases, we’re combining Colorbox with iFrames and jQuery UI tabs so you can manage multiple covers or photos attached to a single record.
Flot
When you want to talk about a powerful use of jQuery to bring in HTML 5-type elements on all of today’s browser, a good example is Flot. Flot creates charts and graphs on the fly from any data you feed to it, and allows you to manipulate it in a fairly easy and highly scalable manner. Flot must be used in conjunction with excanvas (which is included in the download) so that older browsers like IE7 that don’t or can’t support the new <canvas> tag will still be able to display all the charty magic you’ll be creating with it.
We’re using Flot mainly on the Subject pages to illustrate published dates of related books, providing a quick visual readout of the subject’s history in books, as well as an interactive method of focusing in on particular periods to get a closer look at that history. We also use Flot on our Administrative pages to see how the site is performing and watch the number of edits, active IP addresses, new memberships and other data without resorting to Flash.
jCarousel
This is a case where we’ve adapted something with a particular goal in mind and twisted it around a bit to serve our purposes. jCarousel is generally used as a way to look at a series of images in a dynamic fashion, so you can see a subset of them by flipping around a carousel housed in a window on screen. We’re using jCarousel on our Subject pages to display book covers. Luckily for us, jCarousel comes complete with Ajax support to pull in images in a dynamic fashion only when called for (because sometimes the list of covers is thousands of titles long, and you may never get to the 234th panel, right?) so we don’t have to pre-populate our carousel with everything at first, but after you call them in, the carousel works as usual. You can flip back and forth between a dozen covers (or cover placeholders) and then click the cover to go to that work’s page.
Perhaps more interesting than that (because in a sense, book covers are just images, right?) we tied Flot and jCarousel together so that the things you do in a Flot chart affect the covers shown in the carousel. When you zoom in on the chart to see only the number of books about flowers published between 1910 and 1970, the carousel updates itself to correspond.
dataTables
As we developed the design, it became quickly apparent that what a lot of people wanted to know about a given book, more than anything else, was “is this available to read online right now?” Luckily, we usually know the answer to that question because The Internet Archive is busily scanning in books for everyone to read – probably we’re scanning more books as you’re reading this – so we have millions of titles online. We also monitor the availability of ebooks by others, so we have a fairly decent knowledge about that. But how do we let you know about that when you’re looking at a work about its related editions?
We decided to poll the database about every edition whenever you look at a work page (with more than one edition) and present that in a big ol’ hairy table, and then allow you to sort the results on that page and see which editions are available as ebooks. dataTables fit the bill perfectly as a way to take what could be an unwieldy gob of info and parse it so that the table’s contents could be sorted and re-sorted based on your whims, and would also paginate the results so you’re not faced with hundreds of rows to scan. Additionally, dataTables provides in-table searches, so you can further filter the list of editions down to just those published in 1972.
And as long as we were polling the database, we’re also showing you if you can buy the book (though at present we’re not grabbing the book’s availability at the various online stores – but we plan to!), borrow the book or download your own copy. Allan Jardine, who developed dataTables, also provided a couple of enhancements just for us because he’s a really nice guy.
Assorted and Sundry
Those are the Big Four plug-ins we’re using, but we’re also taking advantage of jQuery in a number of ways.
- When you add a new work to Open Library and start typing in an author’s name, a modified version of jQuery Autocomplete performs a look-up of existing authors to see if we already know about the one you’re typing.
- When you’re filling out a form, jQuery Validation is doing some pre-submission check ups on your inputs and what we require.
- When you’re typing in a text box, WMD, the Wysiwyg Markdown editor, is providing the toolbar you see at the top and the preview you see at the bottom so you don’t have to figure out if what you’re typing is going to look like what you think it will. Our developer, Anand, has improved the source and we made that available on GitHub.
Perhaps the nicest thing about using jQuery, as illustrated above, is that there’s likely to be a solution to your problem already available, and that the people who made it are amenable to helping you figure out any problems you encounter with it when things start to collide. The library itself is robust, easy to implement and maintained by a very large contingent of very smart people. Luckily for me, they’re always a lot smarter than I am, so they already figured everything out.
My thanks to everyone involved with jQuery and all the plug-ins we’re using – and all the plug-ins we’ll be using as we move forward and continually improve Open Library.
