Clone this wiki locally
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:
Load the libraries
After you added that div, you need to get the prerequisites for Openflipbook:
- jQuery: used for general DOM mangling
- 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.
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)