Plugin to view pdf as magazine

Question

Plugin to view pdf as magazine

Asked 6 years, 10 months ago

Viewed 1,328 times

1

Speak, people...I need help: My boss wants the documents that are on our intranet to be seen as books and magazines. is there a jquery plugin or something to do or embed??? Vlw

there are many, search for "jquery flipbook plugin" which you will find several both free and paid

– Guilherme

2018/01/23 at 19:31

1 answer

Browser other questions tagged jquery pdf

You are not signed in. Login or sign up in order to post.

by Guilherme • **2,717** points · Answer 1 · 2018-01-23T19:09:29+00:00

Look for Flipbook plugins

You will find from ready-made components, where you just pass the pdf, from libraries to mount your flipbook from HTML content

I found this turn js. interesting and easy to use, but it works with images

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../turn.min.js"></script>

<style type="text/css">
body{
    background:#ccc;
}
#magazine{
    width:1152px;
    height:752px;
}
#magazine .turn-page{
    background-color:#ccc;
    background-size:100% 100%;
}
</style>
</head>
<body>

<div id="magazine">
    <div style="background-image:url(pages/01.jpg);"></div>
    <div style="background-image:url(pages/02.jpg);"></div>
    <div style="background-image:url(pages/03.jpg);"></div>
    <div style="background-image:url(pages/04.jpg);"></div>
    <div style="background-image:url(pages/05.jpg);"></div>
    <div style="background-image:url(pages/06.jpg);"></div>
</div>


<script type="text/javascript">
    $(window).ready(function() {
        $('#magazine').turn({
                            display: 'double',
                            acceleration: true,
                            gradients: !$.isTouch,
                            elevation:50,
                            when: {
                                turned: function(e, page) {
                                    /*console.log('Current view: ', $(this).turn('view'));*/
                                }
                            }
                        });
    });


    $(window).bind('keydown', function(e){

        if (e.keyCode==37)
            $('#magazine').turn('previous');
        else if (e.keyCode==39)
            $('#magazine').turn('next');

    });
</script>

To use pdf’s, there are many paid plugins, or services where you host your pdf in their system.

One option might be to use the PDF.js library, which does not use jQuery

Filing cabinet js pageviewer.

if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
  alert('Please build the pdfjs-dist library using\n' +
        '  `gulp dist-install`');
}

// The workerSrc property shall be specified.
//
PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';

// Some PDFs need external cmaps.
//
// PDFJS.cMapUrl = '../../node_modules/pdfjs-dist/cmaps/';
// PDFJS.cMapPacked = true;

var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf';
var PAGE_TO_VIEW = 1;
var SCALE = 1.0;

var container = document.getElementById('pageContainer');

// Loading document.
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
  // Document loaded, retrieving the page.
  return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
    // Creating the page view with default parameters.
    var pdfPageView = new PDFJS.PDFPageView({
      container: container,
      id: PAGE_TO_VIEW,
      scale: SCALE,
      defaultViewport: pdfPage.getViewport(SCALE),
      // We can enable text/annotations layers, if needed
      textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
      annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
    });
    // Associates the actual page with the view, and drawing it
    pdfPageView.setPdfPage(pdfPage);
    return pdfPageView.draw();
  });
});

Filing cabinet simpleviewer.html

<html dir="ltr" mozdisallowselectionprint>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google" content="notranslate">
  <title>PDF.js viewer using built components</title>

  <style>
    body {
      background-color: #808080;
      margin: 0;
      padding: 0;
    }
    #viewerContainer {
      overflow: auto;
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>

  <link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">

  <script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
  <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
</head>

<body tabindex="1">
  <div id="viewerContainer">
    <div id="viewer" class="pdfViewer"></div>
  </div>

  <script src="simpleviewer.js"></script>
</body>
</html>

Source