How to Use the WowBook jQuery Flipbook Plugin

How to Use the WowBook jQuery Flipbook Plugin

How to Use the WowBook jQuery Flipbook Plugin

How to Use the WowBook jQuery Flipbook Plugin

How to Use the WowBook jQuery Flipbook Plugin
How to Use the WowBook jQuery Flipbook Plugin
How to Use the WowBook jQuery Flipbook Plugin How to Use the WowBook jQuery Flipbook Plugin How to Use the WowBook jQuery Flipbook Plugin How to Use the WowBook jQuery Flipbook Plugin How to Use the WowBook jQuery Flipbook Plugin

How to Use the WowBook jQuery Flipbook Plugin

If you are looking for an easy-to-use tool that can turn your photos and PDF files into interactive flip books or slide shows, WowBook, one of the most popular jQuery plugins on CodeCanyon, is for you. This premium plugin offers two realistic page turn effects, complete with page turning sounds, and it runs smoothly on all modern browsers.

Flip books created using the WowBook plugin are responsive and look good on both desktop and mobile devices. Furthermore, they support common touch gestures such as pinch to zoom.

In this tutorial, I’ll show you how to add WowBook to a webpage and make the most of all the features it offers.

1. Getting WowBook

If you don’t already have an Envato Market account, start by creating one now. Then sign in to CodeCanyon and purchase a license for WowBook.

WowBook on CodeCanyon

You’ll now be able to download a ZIP file containing all the necessary files and documentation associated with the plugin. The file has a directory named wow_book, which contains a minimized version of the plugin’s source code. You must extract this directory into your development environment to be able to use WowBook.

At this point, to add the WowBook jQuery plugin to a web page, all you need to do is include the following JavaScript and CSS files:

Note that you can omit pdf.combined.min.js if you don’t intend to use WowBook with PDF files.

Although this jQuery plugin supports older versions of jQuery, in this tutorial, we’ll be using jQuery v3.3.1.

2. Creating a Flip Book

All WowBook needs is an empty <div> element to render the pages of your flip book. So create one now using the following code:

In your JavaScript code, you can then select the <div> element and call its wowBook() method to generate the flip book. As an argument, the method expects a JavaScript object containing configuration details about the flip book.

WowBook offers dozens of intuitively-named configuration options. For example, to render the pages of a PDF file inside the flip book, you can use the pdf option and specify the location of the file.

Although the above code is sufficient to generate a simple flip book, its dimensions will depend on the page size of the PDF file. In order to have better control over the size of the flip book, you must set the container option to true. After you do so, you’ll be able to use the containerWidth and containerHeight options to specify your desired dimensions in pixels.

By default, the container is transparent. If you want to, you can use the containerBackground option to give it a solid color.

If you open your web page in a browser now, you should be able to see the flip book. When you hover your mouse near the corners of the book, you’ll be able to see a curl animation. You can then click on or drag the corner to turn the page.

A PDF file rendered as a flip book

As you turn the pages of the flip book, you should be able to hear page-turning sounds on most browsers.

3. Creating a Photo Album

WowBook is more than just a custom PDF viewer. You can use it to quickly generate flip books from HTML content too.

For example, the following code creates a flip book having four pages, each of which displays a single photo.

In the above code, every <div> element inside my_flip_book is equivalent to a page of the flip book.

You may have noticed that there’s a class named photo associated with each <img> 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:

A set of photos turned into a flip book

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.

A hardcover flip book

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 having four controls, which is shown below the flip book:

Here’s what the toolbar looks like:

Flip book with a toolbar

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:

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

Flip book with a toolbar having share buttons

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:

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.

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

Flip book with a table of contents

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:

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 6 months of free support, you can also contact its author, maguiar01, for additional assistance.