Created
March 29, 2016 09:33
-
-
Save MifRea1/cac929a11228b4d1abb3 to your computer and use it in GitHub Desktop.
epub.js + hammer.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Basic ePubJS Example</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <!-- EPUBJS Renderer --> | |
| <script src="../build/epub.min.js"></script> | |
| <link rel="stylesheet" href="basic.css"> | |
| <style type="text/css"> | |
| body { | |
| overflow: auto; | |
| background: #eee; | |
| } | |
| #wrapper { | |
| width: 480px; | |
| height: 640px; | |
| overflow: hidden; | |
| border: 1px solid #ccc; | |
| margin: 20px auto; | |
| background: #fff; | |
| border-radius: 0 5px 5px 0; | |
| } | |
| #area { | |
| width: 480px; | |
| height: 650px; | |
| margin: -5px auto; | |
| -moz-box-shadow: inset 10px 0 20px rgba(0,0,0,.1); | |
| -webkit-box-shadow: inset 10px 0 20px rgba(0,0,0,.1); | |
| box-shadow: inset 10px 0 20px rgba(0,0,0,.1); | |
| padding: 40px 40px; | |
| } | |
| </style> | |
| <script> | |
| "use strict"; | |
| EPUBJS.Hooks.register('beforeChapterDisplay').swipeDetection = function(callback, renderer) { | |
| function detectSwipe() { | |
| var script = renderer.doc.createElement('script'); | |
| script.text = "\ | |
| var swiper = new Hammer(document);\ | |
| swiper.on('swipeleft', function() {\ | |
| parent.Book.nextPage();\ | |
| });\ | |
| swiper.on('swiperight', function() {\ | |
| parent.Book.prevPage();\ | |
| });"; | |
| renderer.doc.head.appendChild(script); | |
| } | |
| EPUBJS.core.addScript('//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.6/hammer.min.js', detectSwipe, renderer.doc.head); | |
| if (callback) { | |
| callback(); | |
| } | |
| }; | |
| var Book = ePub("../reader/moby-dick/", { | |
| width: 400, | |
| height: 600, | |
| spreads : false | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="main"> | |
| <div id="prev" onclick="Book.prevPage();" class="arrow">‹</div> | |
| <div id="wrapper"> | |
| <div id="area"></div> | |
| </div> | |
| <div id="next" onclick="Book.nextPage();" class="arrow">›</div> | |
| </div> | |
| <script> | |
| Book.renderTo("area").then(function(){ | |
| //Book.setStyle("width", "400px"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
this code word successfully when use in internet browser like Chrome,... i want create mobile application under ionic framework but when i build application for android swipe dose not work in mobile device !!!