Skip to content

Latest commit

 

History

History
136 lines (111 loc) · 4.46 KB

README.md

File metadata and controls

136 lines (111 loc) · 4.46 KB
Raw

Paginis

A PDF flipbook website designed to make your life easier. It can take a PDF as input and generate a flipbook, whether it's a URL, local file, or a featured YouTube playlist to play while reading.

Sample

Tech Stack

Tech Stack

Issues

Flipbook pages are not visible/defective in PDF

Check the pdf if using the link Make sure that cross-origin resource sharing is enabled

File Structure

Click to expand! This flipbook plugin is jQuery-based. Basically, you can copy the files in folder to your working directory. You don't need to include the lib folder.. 
└── 📁pdf-flipbook
    └── 📁assets
    └── 📁lib
        └── 📁css
            └── 📁page
                └── button.css
                └── input-panel-buttons.css
                └── layout.css
                └── panel.css
                └── quotes.css
            └── min.css
            └── style.css
            └── themify-icons.min.css
        └── 📁fonts

        └── 📁images
            └── 📁pdfjs
            └── 📁textures
                └── white.jpg
            └── loading.gif
        └── 📁js
            └── 📁libs
                └── compatibility.js
                └── jquery.min.js
                └── mockup.min.js
                └── pdf.min.js
                └── pdf.worker.min.js
                └── three.min.jsgit 
            └── 📁quotes
                └── db.js
                └── main.js
                └── ui.js
            └── dflip.min.js
            └── load.js
            └── media.js
            └── ui.js
        └── 📁sound
    └── .gitignore
    └── index.html
    └── LICENSE
    └── README.md

File Template

And ensure the following files are included in the html.

CSS:

<!-- Flipbook StyleSheet -->
<link href="http://www.yoursite.com/dflip/css/dflip.css" rel="stylesheet" type="text/css">

<!-- Icons Stylesheet -->
<link href="http://www.yoursite.com/dflip/css/themify-icons.css" rel="stylesheet" type="text/css">

JavaScript:

Note: Include them just before tag. Don't use them in head.

<!-- jQuery 1.9.1 or above -->
<script src="http://www.yoursite.com/dflip/js/libs/jquery.min.js" type="text/javascript"></script>

<!-- Flipbook main Js file -->
<script src="http://www.yoursite.com/dflip/js/dflip.min.js" type="text/javascript"></script>

Basic HTML Template

    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Basic HTML Template</title>

    <!-- Flipbook StyleSheet -->
    <link href="http://www.yoursite.com/dflip/css/dflip.css" rel="stylesheet" type="text/css">

    <!-- Icons Stylesheet -->
    <link href="http://www.yoursite.com/dflip/css/themify-icons.css" rel="stylesheet" type="text/css">

    </head>
    <body>
    <div class="_df_thumb" id="df_manual_thumb" source="location of pdf.pdf" thumb="location of thumbnail.jpg"> PDF Example</div >
    <!-- Refer to other examples on how to create different types of flipbook -->

    <!-- jQuery 1.9.1 or above -->
    <script src="http://www.yoursite.com/dflip/js/libs/jquery.min.js" type="text/javascript"></script>

    <!-- Flipbook main Js file -->
    <script src="http://www.yoursite.com/dflip/js/dflip.min.js" type="text/javascript"></script>

    </body>
    </html>

Create Flipbook through Button lightbox.

<div class="_df_button"
    source="http://www.yoursite.com/books/dflip manual.pdf"
    id="df_manual_button">
    Button
</div>

🔗 Libraries & Tools

  • PDF.js
    A powerful open-source library for rendering PDF files directly in the browser.

  • Three.js
    A flexible JavaScript 3D library for creating immersive WebGL experiences.

  • DFlip
    A smooth and customizable flipbook plugin, perfect for converting PDFs into interactive books.

  • JQuery_DFlip
    An extension of DFlip with support for jQuery, adding easy-to-use flipbook effects to your documents.