Creating Flipbook

To create a flipbook, you need to

Include scripts and style in your head of your HTML

<link rel="stylesheet" type="text/css" href="css/flipbook.style.css">

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

Create an element that will be container for flipbook, for example

...
<body>
    <div id="container"></div>
</body>
...

and call the flipBook function with options.

Flipbook from images

const options = {
    pages: [
        {src: "book1/1.jpg", thumb: "book1/thumb1.jpg"},
        {src: "book1/2.jpg", thumb: "book1/thumb2.jpg"},
        ...
    ]
}
const container = getElementById('container');

new FlipBook(container, options)

Full code

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/flipbook.style.css">
  <script src="js/flipbook.min.js"></script>

  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
      const options = {
        pages: [
          {src: "book1/1.jpg", thumb: "book1/thumb1.jpg"},
          {src: "book1/2.jpg", thumb: "book1/thumb2.jpg"},
          ...
        ]
      }
      const container = document.getElementById('container');
      new FlipBook(container, options);
    });
  </script>

</head>

<body>
  <div id="container"></div>
</body>

</html>

Flipbook from PDF

const options = {
    pdfUrl: 'pdf/1.pdf'
}
const container = getElementById('container');

new FlipBook(container, options)

Full code

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/flipbook.style.css">
  <script src="js/flipbook.min.js"></script>

  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
      const options = {
        pdfUrl: 'pdf/1.pdf'
      };
      const container = document.getElementById('container');
      new FlipBook(container, options);
    });
  </script>

</head>

<body>
  <div id="container"></div>
</body>

</html>

Creating flipbooks using jQuery synthax (legacy)

Flipbooks can also be created using jQuery, to support legacy code

jQuery(document).ready({
  jQuery("#container").flipBook(optinos)
})

PreviousLicense Activation NextOptimized PDF Flipbook

Last updated 1 year ago