« go to builtbywill.com

Booklet - jQuery Plugin

installation

1. jQuery

Load jQuery either from a local copy or from an external CDN

2. jQuery UI

Load jQuery UI either from a local copy or from an external CDN

3. jQuery Easing Plugin

Add the Easing jQuery Plugin. While not completely necessary, if not included your animations will not look as nice.

4. Booklet Files

Load the Booklet JS and CSS files. Be sure when editing the CSS file to make image paths relative to the CSS file. When changing some of the image options in the Booklet options, those images will be relative to the page itself.

5. Create the Content

To create a booklet you must first place the content for the book onto your page.

  1. Make an outside container <div> and give it an identifier like an ID or Class.
  2. Inside of your container, add your pages. The booklet will recognize each direct children as a slide, which could contain content or be a single item.

The following shows a simple four page book.

6. Initialize the Booklet

Using jQuery selectors initialize your booklet. You can setup multiple books either with the same class or within the same selector, as long as you want their options to be the same.

For more information on customization, visit the Documentation page

7. (Optional) IE6 Support

By default, the images for the booklet shadows and arrows are PNG's. To make them compatible with IE6 I highly recommend DD_belatedPNG

An example on how to use it is below: