epubjs
Version:
Render ePub documents in the browser, across many devices
127 lines (100 loc) • 2.51 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>EPUB.js Basic Example</title>
<script src="../dist/epub.js"></script>
<style type="text/css">
body {
margin: 0;
height: 100%;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
#viewer {
display: block;
margin: 0 auto;
width: 600px;
height: 100%;
}
#viewer iframe {
background: white;
box-shadow: 0 0 4px #ccc;
width: 590px;
margin: 10px auto;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: absolute;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script>
var book = ePub();
var rendition = new EPUBJS.Renderer(book);
var base = "http://localhost:8081/books/accessible_epub_3-20121024.epub/";
var findNav = function(contents) {
var next = contents.querySelector("link[rel='next']");
var prev = contents.querySelector("link[rel='prev']");
var nextSection, prevSection;
if(next) {
nextSection = new EPUBJS.Section({
href: next.getAttribute('href'),
url: base + next.getAttribute('href')
});
nextSection.beforeSectionLoad = findNav;
if(!(nextSection.href in book.spine.spineByHref)) {
book.spine.append(nextSection);
}
}
if(prev) {
prevSection = new EPUBJS.Section({
href: prev.getAttribute('href'),
url: base + prev.getAttribute('href')
});
prevSection.beforeSectionLoad = findNav;
if(!(prevSection.href in book.spine.spineByHref)) {
book.spine.prepend(prevSection);
}
}
};
var section = new EPUBJS.Section({
href: "./9.xhtml",
url: base + "9.xhtml"
});
section.beforeSectionLoad = findNav;
book.spine.append(section);
book.open();
rendition.attachTo("viewer");
rendition.display("./9.xhtml");
</script>
</body>
</html>