MifRea1/single.html

## single.html
<!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>
	<!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>