Advanced Usage
If you have a page containing multiple embedded flipbooks, you can set up an API instance on each of them where you can execute commands and set up subscriptions. Below is an example of a page containing multiple flipbooks each with their own API instance.
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
</head>
<body>
<!-- Embedded Flipbooks -->
<iframe src="https://demo.ipaper.io" id="myFlipbook"></iframe>
<iframe src="https://demo.ipaper.io" id="myOtherFlipbook"></iframe>
<!-- JS API embed script -->
<script src='https://cdn.ipaper.io/flipbooks/api/v3/latest.js'></script>
<!-- Custom script -->
<script>
const myFlipbook = document.getElementById('myFlipbook');
const myFlipbookInstance = iPaperJsApi(myFlipbook, 3);
myFlipbookInstance.publication.onSpreadChange((result) => {
console.log('Spread changed in myFlipbook', result);
});
const myOtherFlipbook= document.getElementById('myOtherFlipbook');
const myOtherFlipbookInstance= iPaperJsApi(myOtherFlipbook, 3);
myOtherFlipbookInstance.publication.onSpreadChange((result) => {
console.log('Spread changed in myOtherFlipbook', result);
});
</script>
</body>
</html>
Last modified 2mo ago