Leonidas-from-XIV edited this page Sep 14, 2010 · 5 revisions
Clone this wiki locally

So, you have a page but wonder what to do to get a flipbook on it? Well, you could get a Flash program and embed it on the web site, but you could also go for a open, standard-compliant solution that only needs javaScript – enter Openflipbook!

How to use flipbook on my own page?

Create the div element that will contain the flipbook

Suppose you have a HTML file and want to embed a flipbook in the middle of it, then you need to create a div element which is going to contain the flipbook:

Everything inside the div will be deleted once the flipbook loads, so you can insert a nice fallback for people who disabled JavaScript.

Load the libraries

After you added that div, you need to get the prerequisites for Openflipbook:

  • jQuery: used for general DOM mangling
  • jQuery UI: Openflipbook uses the progressbar from jQuery UI. You need both the JavaScript code was well as the CSS file with the desired theme.
  • jGesture: The gesture control is provided my jGesture
  • jQuery Preload: Images get preloaded and the progress gets displayed on a progressbar.
  • Openflipbook, obviously

You can get both jQuery and jQuery UI from the Google CDN if you like. The code to load all libraries could look like this, put this into the head element of your page:

Load the flipbook

Of course, you need to make sure you have the images first. There are some requirements for the images currently:

  • Every page needs two images, since each page can be zoomed in:
    • imagename_small.jpg: the 450×325 pixel “zoomed out” version. This one will be displayed in the 2-page view
    • imagename_large.jpg: the 900×650 pixel “zoomed in” version. This one will be displayed when the user decides to take a closer look.
  • The images must be in JPEG format
  • The images must obey the small/large convention, that is consist of the name of the image, an underscore, the word “large” or “small” and end with “.jpg”.

After you did so, you can use the following code to load the flipbook into the div:

This code assumes you have 16 images in that you want to display. Keep in mind that the order really ressembles a book: page 1 (image_01) is displayed first, after flipping page 2 and 3 are visible (image_02, image_03) and so on.

You are done! It seems difficult the first time, but I have taken care to make the neccessary JavaScript code to create a flipbook really as simple as possible.

Which browsers were tested?

As we use jQuery, we try to be compatible to the most popular browsers. We only have a limited number of systems to test on but we have tested it on a number of browsers:

  • Firefox 3.x
  • Chromium 4.x
  • WebKit based browsers (WebKitGTK+ 1.1.15) with the Nitro (SFX) engine, so it should run in Safari too
  • IE 6 (yes, it will even work for your business partners who keep on using IE)

One caveat: IE 6 has a rather slow JavaScript engine, so the effects are not as smooth as on other browsers. Basically that means that IE users need faster computers to experience the flipbook in its full glory.