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="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<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

jQuery("#container").flipBook({
    pages: [
        {src: "book1/1.jpg", thumb: "book1/thumb1.jpg"},
        {src: "book1/2.jpg", thumb: "book1/thumb2.jpg"},
        ...
    ]
})

Full code

<!DOCTYPE html>
<html>

<head>

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  
<link rel="stylesheet" type="text/css" href="css/flipbook.style.css">

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

<script type="text/javascript">
  jQuery(document).ready(function () {
    jQuery("#container").flipBook({
      pages:[
        {src:"book1/1.jpg", thumb:"book1/thumb1.jpg"},
        {src:"book1/2.jpg", thumb:"book1/thumb2.jpg"},
        ...
      ]
    });
  })
</script>

</head>

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

</html>

Flipbook from PDF

jQuery("#container").flipBook({
    pdfUrl: 'pdf/1.pdf'
})

Full code

<!DOCTYPE html>
<html>

<head>

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  
<link rel="stylesheet" type="text/css" href="css/flipbook.style.css">

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

<script type="text/javascript">
  jQuery(document).ready(function () {
    jQuery("#container").flipBook({
      pdfUrl: 'pdf/1.pdf'
    });
  })
</script>

</head>

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

</html>
PreviousQuick startNextOptimized PDF Flipbook

Last updated