eReading Room, NYPL Labs

Binding Your Own E-books: Part 1 (The Internet Archive BookReader)

The Wizard of Oz in the BookReaderThe Wizard of Oz in the BookReaderIn 2005, the Internet Archive released the first version of their BookReader, a web widget that allows a user to flip through images of book pages with an animation that suggests the turning of physical paper. The current version also allows you to view the images as set of thumbnails or as a vertically scrolling set of page images (like a PDF). The code is open source and written in JavaScript (a computer language that runs entirely in the web browser), so it's very easy to install the widget on any web page. As a result, a lot of libraries and archives have used versions of the code on their own web sites (NYPL uses it on the new Digital Collections platform).

Loading images of book pages into the widget does require a little bit of familiarity with computer code, though. You need to make a list of pointers to images hosted somewhere on the web, and modify a few JavaScript functions to describe how determine the size at which the images should display. To make things a little easier, I've made a modification to the code that allows it to load this information from a Google Spreadsheet.

You can find a example book at this address:

https://s3.amazonaws.com/lpa-musical.nypl.org/BookReader/BookReaderDemo/index.html#0Ag7PrlWT3aWadDdVODJLVUs0a1AtUVlUWlhnXzdwcGc

The book was created from this spreadsheet:

https://docs.google.com/spreadsheet/ccc?key=0Ag7PrlWT3aWadDdVODJLVUs0a1AtUVlUWlhnXzdwcGc#gid=0

(Note that the Google "key," "0Ag7PrlWT3aWadDdVODJLVUs0a1AtUVlUWlhnXzdwcGc" appears in both addresses).If you want to make a book, all you need is a simple three column Google Spreadsheet. Just put the words "image", "width", and "height" in the first three cells of the first row of the Spreadsheet (one word in each cell). If you want, you can also give your book a title by renaming the "sheet" in the first tab at the bottom of the page. You can use copy the spreadsheet example above as a template.

In the first column, paste links to image files on the web (the links should point directly to the image). If you need to upload images, there are a lot of free hosting options including Flickr, Imgur, and Google+.

Now, share the spreadsheet publicly on the web.  [EDIT: Do this both by sharing the document publicly, AND by selecting "publish to the web..." from the file menu.]  Once you've done that, copy the big long sequence of letters and numbers after "key=" through the hash (#). If you paste that on the end of this address:

https://s3.amazonaws.com/lpa-musical.nypl.org/BookReader/BookReaderDemo/index.html#

You'll find your images have been turned into a book. The code itself is hosted on my GitHub account.

Leave a comment if you have questions/problems.

Comments

Patron-generated content represents the views and interpretations of the patron, not necessarily those of The New York Public Library. For more information see NYPL's Website Terms and Conditions.

Awesome!

Doug, this is super helpful! Thanks for sharing the code as well! I'll get my own instance going here in a bit.

Nice

This is perfect. Thanks for sharing.

prrinting

Can the pages be printed out?