Getting Started for HTML tag / jQuery Plugin

The easiest way to get started right now download the demo version. It contains several examples: inserting a EASY FlipBook on a page, using a modal window, changing the default settings. If you have not studied the interactive demo version, then you can do it here and get acquainted with the basic user features of the product.

Introduction

EASY FlipBook is being developed using the latest high-performance technology. To start using the EASY FlipBook, you first need a few steps to prepare, more on that later.

Web server

EASY 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, ...).

One of the easiest ways is to use SimpleHTTPServer. Good article on installing SimpleHTTPServer web server.

Copying files

Copy all the directories and files from the dist directory of your archive with the EASY FlipBook in the root folder your web server directory.

Create index.html on the root folder web server with next contents

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Source code</title>
    <script src="js/jquery.min.js"></script>
    <style type="text/css">            
      body {
        background-color: #333;
        margin: 0;
        padding: 0;
      }
      .container {
        height: 99vh;
      }
    </style>
</head>
<body>

</body>
</html>

We just made a draft of our page on which we will display the e-book through EASY FlipBook.

Scripts

Append to the end of body the scripts

<script src="js/easy-flipbook.min.js"></script>

So we added javascript EASY FlipBook to our first web page.

Using

Add your PDF file to folder pdf next to index.html. There are two ways to create EASY FlipBook - choose your one.

HTML tag

Then insert tag to body before the scripts, before line "<script src="js/easy-flipbook.min.js"></script>". If you added your pdf file in the previous step, then change the following file name “tesla-model-s.pdf” to the name of your file.

<div class="flip-book-container solid-container" src="fb_sources/pdfs/tesla-model-s.pdf"></div>

As a result, you should get an index.html file with the following code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Source code</title>
    <script src="js/jquery.min.js"></script>
    <style type="text/css">            
      body {
        background-color: #333;
        margin: 0;
        padding: 0;
      }
      .container {
        height: 99vh;
      }
    </style>
</head>
<body>

    <div class="flip-book-container container" src="fb_sources/pdfs/tesla-model-s.pdf"></div>
    
    <script src="js/easy-flipbook.min.js"></script>

</body>
</html>  

It is really very simple!

That is enough to create simple EASY FlipBook from PDF. Also you can have a look at similar example for HTML tag.

jQuery plugin

Insert tag to body before the scripts

<div class="my-flip-book-container container"></div>

To create EASY FlipBook add to the end of body one of the scripts

<script src="js/easy-flipbook.min.js"></script>

<script type="text/javascript">
  var template = {
    html: 'templates/default-book-view.html',
    styles: [
      'css/black-book-view.css'
    ],
    script: 'js/default-book-view.js',
      sounds: {
            startFlip: 'sounds/start-flip.mp3',
            endFlip: 'sounds/end-flip.mp3'
          }
  };

  $('.my-flip-book-container').FlipBook({
    pdf: 'fb_sources/pdfs/tesla-model-s.pdf',
    template: template
  });
</script>

Also you can have a look at similar example.

As a result, you should get an index.html file with the following code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Source code</title>
    <script src="js/jquery.min.js"></script>
    <style type="text/css">            
      body {
        background-color: #333;
        margin: 0;
        padding: 0;
      }
      .container {
        height: 99vh;
      }
    </style>
</head>
<body>

    <div class="my-flip-book-container container"></div>

    <script src="js/easy-flipbook.min.js"></script>

    <script type="text/javascript">
      var template = {
        html: 'templates/default-book-view.html',
        styles: [
          'css/black-book-view.css'
        ],
        script: 'js/default-book-view.js',
        sounds: {
          startFlip: 'sounds/start-flip.mp3',
          endFlip: 'sounds/end-flip.mp3'
        }
      };

      $('.my-flip-book-container').FlipBook({
        pdf: 'fb_sources/pdfs/tesla-model-s.pdf',
        template: template
      });
      
    </script>

</body>
</html>  

That is enough to create simple EASY FlipBook from PDF. Also you can have a look at similar example for jquery plugin.

Result

If you started the web server at the address http://127.0.0.1:8080 then if you did everything as it is written here, then at http://127.0.0.1:8080/index.html you will see your book in EASY FlipBook!

Flexible corners

Wow! Is not it?!