3D FlipBook jQuery plugin getting started

The easiest way to start right now - Download free version. It contains several examples: inserting 3D FlipBook into a page, using with a modal window, changing default settings, choosing an apropriate skin.

Introduction

3D FlipBook is very similar model of real book. For animation imitation is used Newton mechanics. It allows to receive very realistic page flips. Using physics model allow to the pages interact with other pages. So the animation looks natural and very attractive.

Installation

Web server

3D FlipBook uses AJAX to fetch some data so it does not work locally. It needs to be run from web server. You can use any web server that allows to access static data (.html, .js, .jpg, .png, .css).

Copying files

Create index.html on the web server with next contents


        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>3D FlipBook</title>
            <style type="text/css">
              body {
                  margin: 0;
                  padding: 0;
              }
              .solid-container {
                height: 100vh;
              }
            </style>
          </head>
          <body>

          </body>
        </html>

Plugin has default options, so it can automatically load template files, but you need to put them in strict order. Create directories images, js, css, fonts and templates in the same directory. Then copy all contents

from /3d-flip-book/images to images,
from /3d-flip-book/fonts to fonts,
from /3d-flip-book/templates to templates,
from /3d-flip-book/css to css,
from /3d-flip-book/js/libs to js.

Copy file from /3d-flip-book/js/dist/3dflipbook.min.js to js

Scripts

Append to the end of body the scripts


        <script src="js/jquery.min.js"></script>
        <script src="js/html2canvas.min.js"></script>
        <script src="js/three.min.js"></script>
        <script src="js/pdf.min.js"></script>

        <script src="js/3dflipbook.min.js"></script>

Using

Create folder src next to index.html. There are two ways to create 3D FlipBook - choose your one.

HTML tag

Copy file /3d-flip-book/books/pdf/FoxitPdfSdk.pdf to src. Then insert tag to body before the scripts


        <div class="flip-book-container solid-container" src="src/FoxitPdfSdk.pdf">

        </div>

That is enough to create simple 3D FlipBook from PDF. Also you can have a look at similar example.

jQuery plugin

Copy file /3d-flip-book/books/pdf/FoxitPdfSdk.pdf to src.
Copy directory /3d-flip-book/books/image/theKingIsBlack to src.
Copy directory /3d-flip-book/books/html/preview to src.

Insert tag to body before the scripts


        <div class="solid-container">

        </div>

To create 3D FlipBook add to the end of body one of the scripts


        <!-- To create 3D FlipBook from PDF -->
        <script type="text/javascript">
          $('.solid-container').FlipBook({pdf: 'src/FoxitPdfSdk.pdf'});
        </script>

        <!-- To create 3D FlipBook from images -->
        <script type="text/javascript">
          $('.solid-container').FlipBook({
            pageCallback: function(n) {
              return {
                type: 'image',
                src: 'src/theKingIsBlack/'+(n+1)+'.jpg',
                interactive: false
              };
            },
            pages: 40
          });
        </script>

        <!-- To create 3D FlipBook from HTMLs -->
        <script type="text/javascript">
          $('.solid-container').FlipBook({
            pageCallback: function(n) {
              return {
                type: 'html',
                src: 'src/preview/'+(n%3+1)+'.html',
                interactive: true
              };
            },
            pages: 10
          });
        </script>

Useful Links

For next learning it is recommended to visit links below.