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)
})
