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.
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.
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:
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.
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.
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 having four controls, which is shown below the flip book:
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.
5. Creating a Table of Contents
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:
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:
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.