Guest User

Untitled

a guest
Jan 23rd, 2018
98
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.65 KB | None | 0 0
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  2. <script type="text/javascript" src="../../turn.min.js"></script>
  3.  
  4. <style type="text/css">
  5. body{
  6. background:#ccc;
  7. }
  8. #magazine{
  9. width:1152px;
  10. height:752px;
  11. }
  12. #magazine .turn-page{
  13. background-color:#ccc;
  14. background-size:100% 100%;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19.  
  20. <div id="magazine">
  21. <div style="background-image:url(pages/01.jpg);"></div>
  22. <div style="background-image:url(pages/02.jpg);"></div>
  23. <div style="background-image:url(pages/03.jpg);"></div>
  24. <div style="background-image:url(pages/04.jpg);"></div>
  25. <div style="background-image:url(pages/05.jpg);"></div>
  26. <div style="background-image:url(pages/06.jpg);"></div>
  27. </div>
  28.  
  29.  
  30. <script type="text/javascript">
  31. $(window).ready(function() {
  32. $('#magazine').turn({
  33. display: 'double',
  34. acceleration: true,
  35. gradients: !$.isTouch,
  36. elevation:50,
  37. when: {
  38. turned: function(e, page) {
  39. /*console.log('Current view: ', $(this).turn('view'));*/
  40. }
  41. }
  42. });
  43. });
  44.  
  45.  
  46. $(window).bind('keydown', function(e){
  47.  
  48. if (e.keyCode==37)
  49. $('#magazine').turn('previous');
  50. else if (e.keyCode==39)
  51. $('#magazine').turn('next');
  52.  
  53. });
  54. </script>
  55.  
  56. if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
  57. alert('Please build the pdfjs-dist library usingn' +
  58. ' `gulp dist-install`');
  59. }
  60.  
  61. // The workerSrc property shall be specified.
  62. //
  63. PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
  64.  
  65. // Some PDFs need external cmaps.
  66. //
  67. // PDFJS.cMapUrl = '../../node_modules/pdfjs-dist/cmaps/';
  68. // PDFJS.cMapPacked = true;
  69.  
  70. var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf';
  71. var PAGE_TO_VIEW = 1;
  72. var SCALE = 1.0;
  73.  
  74. var container = document.getElementById('pageContainer');
  75.  
  76. // Loading document.
  77. PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
  78. // Document loaded, retrieving the page.
  79. return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
  80. // Creating the page view with default parameters.
  81. var pdfPageView = new PDFJS.PDFPageView({
  82. container: container,
  83. id: PAGE_TO_VIEW,
  84. scale: SCALE,
  85. defaultViewport: pdfPage.getViewport(SCALE),
  86. // We can enable text/annotations layers, if needed
  87. textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
  88. annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
  89. });
  90. // Associates the actual page with the view, and drawing it
  91. pdfPageView.setPdfPage(pdfPage);
  92. return pdfPageView.draw();
  93. });
  94. });
  95.  
  96. <html dir="ltr" mozdisallowselectionprint>
  97. <head>
  98. <meta charset="utf-8">
  99. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  100. <meta name="google" content="notranslate">
  101. <title>PDF.js viewer using built components</title>
  102.  
  103. <style>
  104. body {
  105. background-color: #808080;
  106. margin: 0;
  107. padding: 0;
  108. }
  109. #viewerContainer {
  110. overflow: auto;
  111. position: absolute;
  112. width: 100%;
  113. height: 100%;
  114. }
  115. </style>
  116.  
  117. <link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">
  118.  
  119. <script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
  120. <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
  121. </head>
  122.  
  123. <body tabindex="1">
  124. <div id="viewerContainer">
  125. <div id="viewer" class="pdfViewer"></div>
  126. </div>
  127.  
  128. <script src="simpleviewer.js"></script>
  129. </body>
  130. </html>
Add Comment
Please, Sign In to add comment