How to Use the WowBook jQuery Flipbook Plugin

You may have noticed that there’s a class named photo associated with each  element. Using the class, you can quickly specify how big you want the photos to be. For example, if you want the photos to cover the page completely, while making sure that their aspect ratios don’t change, you can use the following CSS rule:

As you already learned in the previous step, you must now call the wowBook() method to generate the flip book. This time, however, you won’t need the pdf option because the contents of the flip book are already defined in your HTML code.

The flip book should now look like this:

If you don’t have any interesting photos handy, you can download some from PhotoDune or Pexels.

WowBook can generate hardcover flip books too. When you set the hardcovers option to true, the plugin will apply an alternative animation to the first and last pages, which makes them seem less curly and more rigid.

4. Adding a Toolbar

WowBook allows you to add a toolbar containing various navigation controls to your flip book. To create the toolbar, you must use the toolbar option and specify the names of the controls you want, in the order you want them to appear. Optionally, you can use the toolbarPosition option to specify where you want the toolbar to appear. For now, this option supports only two values: top and bottom.

For example, the following code creates a toolbar with four controls, which is shown below the flip book:

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  hardcovers: true,
  toolbar: "back, next, first, last",
  toolbarPosition: "bottom"
});

Here’s what the toolbar looks like:

In addition to buttons for navigation, your toolbar can have buttons that allow users to easily share your flip book on Twitter, Facebook, Reddit, and other popular social networking platforms. To show such buttons, you must use the share option. Additionally, you must add the “share” string to the toolbar option. The following code shows you how:

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  hardcovers: true,
  toolbar: "back, next, first, last, share",
  toolbarPosition: "bottom",
  share: "twitter, facebook, reddit"
});

The toolbar will now display the icons of the social networks you’ve mentioned in the share option.

5. Creating a Table of Contents

If you are displaying a flip book with lots of pages, you may want to allow your users to jump to any page they desire using a panel displaying a table of contents. To create such a panel, you’ll need a JavaScript array, each element of which associates a title with a page number.

Here’s a sample array that gives titles to all the four pages of the flip book we created earlier:

var tableOfContents = [
  ["Eiffel Tower", 0],
  ["Breakfast", 1],
  ["Snowy Day", 2],
  ["Mountains", 3],
];

As you can see, each item of the above array is itself an array, whose first element is the title and second element is the page number.

To associate the array with your flip book, you must use the toc option. Additionally, you must remember to either set the displayToc option to true or add the string toc to the toolbar option. Otherwise, your users will not be able to see the table of contents.

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  hardcovers: true,
  toolbar: "back, next, first, last, toc",
  toolbarPosition: "bottom",
  displayToc: true,
  toc: tableOfContents
});

Here’s what the panel displaying the table of contents looks like:

6. Creating a Slide Show

By setting the slideShow option to true, you can convert your flip book into an animated slide show. In this mode, WowBook will automatically flip through all the pages of your flip book. By default, each page is shown for one second only. To change this duration, you can use the slideShowDelay option. Additionally, if you want the plugin to restart the slide show after the last page is shown, set the slideShowLoop option to true.

The following sample code creates a repeating slide show where each page is shown for three seconds:

$("#my_album").wowBook({
  container: true,
  containerHeight: 670,
  containerWidth: 940,
  slideShow: true,
  slideShowDelay: 3000,
  slideShowLoop: true
});

Conclusion

You now know how to create an animated flip book using the WowBook jQuery plugin. In this tutorial, you also learned how to quickly generate a table of contents and an intuitive toolbar for your flip book.

To learn more about the plugin, do refer to the extensive documentation and examples present in the ZIP file you downloaded. Because WowBook comes with six months of free support, you can also contact its author, maguiar01, for additional assistance.