epub.js
epub.js copied to clipboard
futurepress
Can't change pages
I'm building a P2P ebook reader -- with torrenting as the filesharing aspect. It also has room for authors to embed their own ads within the reader -- to monetize their books. Plan to have it up in a desktop application and an in-browser one. Phones will come a little later.
My problem is when I use the code from the site, I get no way to flip the page or explore the available chapters. Here's my reader page and I'm using a document from Projectgutenberg.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {padding: 0px;
margin: 0px;}
</style>
</head>
<body>
<div id = "area"></div>
</body>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script>
var book = ePub("pg57939-images.epub");
var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
var displayed = rendition.display();
</script>
</footer>
</html>
The book renders fine. I just don't get the side menu or a way to flip to new pages. Thanks for your help. It's appreciated.
I don't know i catch your question or not but i think your answer is you need to add flip system or change page system. Use this code rendition.next(); or rendition.prev();. To flip you need to add other third party flip animation library but for simplicity i added a next & previous layout.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {padding: 0px;
margin: 0px;}
</style>
</head>
<body>
<div id = "area"></div>
<div style="width:100px;height:100px;position: absolute;top: 50%; right:0px;margin-top: -32px;font-size: 64px;color: #E2E2E2;font-weight: bold;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;user-select: none;" onclick="Next();">Next</div>
<div style="width:100px;height:100px;position: absolute;top: 50%;margin-top: -32px;font-size: 64px;color: #E2E2E2;font-weight: bold;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;user-select: none;" onclick="Prev();">Previous</div>
</body>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script>
var book = ePub("pg57939-images.epub");
var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
var displayed = rendition.display();
function Next(){
rendition.next();
}
function Prev(){
rendition.prev();
}
</script>
</footer>
</html>
And for the Table of content you need this code (only use this after the book is ready)
book.ready.then(function(){
book.loaded.navigation.then(function(toc){
toc.forEach(function(chapter) {
var label = chapter.label;
var href = chapter.href;
alert(label + "----" + href);
});
});
});
all the example are for reader is in https://github.com/futurepress/epubjs-reader
@bleedweedsuz, assuming I'm a total JS noob and I have jQuery in my app, why is:
$("#area").click(function(e){
Next();
});
or
$(document).click(function(e){
Next();
});
Not working? Sorry for creating an issue with what seems a such a simple problem -- mostly based on my own misunderstanding.
Do use other element to change pages #area is already use by epubjs. Better use other element like in my example. Use inspect view to what's going on in epub viewer.
And if you really want to use the element itself, you can do something like what I did here: https://github.com/geek1011/ePubViewer/blob/5b4d4990350d0548a7634b7a4d95aa0f39e262ab/script.js#L357 and https://github.com/geek1011/ePubViewer/blob/5b4d4990350d0548a7634b7a4d95aa0f39e262ab/script.js#L126 .