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

hashtagFlipbook from images

hashtagFull code

hashtagFlipbook from PDF

hashtagFull code

hashtagCreating flipbooks using jQuery synthax (legacy)

Flipbook from images

Full code

Flipbook from PDF

Full code

Creating flipbooks using jQuery synthax (legacy)