FlipBooks PDF Reader

Documentation

Overview

The Flipbox PDF Reader allows users to view PDF documents in a flipbook format. It provides a smooth and engaging reading experience using web-based technologies.

Steps to Integrate the Flipbox PDF Reader

1. Include Required Stylesheets

You need to include the necessary CSS files to style the Flipbox PDF Reader. These stylesheets are provided via CDN.

<link href="https://api.i-as.dev/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<link href="https://api.i-as.dev/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">

dflip.min.css: Contains the main styles for the flipbook reader.
themify-icons.min.css: Includes icons used by the Flipbox reader.

2. HTML Structure

The Flipbox reader is embedded inside a div with a class of _df_book and a source attribute pointing to the PDF file you want to display.

<div source="YOUR-PDF-FILE-HERE.pdf" class="_df_book" height="100vh" webgl="true" backgroundcolor="#242424" id="df_manual_book"></div>

Replace YOUR-PDF-FILE-HERE.pdf with the actual URL or path to the PDF file.
height="100vh": Ensures the flipbook takes up the full height of the viewport.
webgl="true": Enables WebGL rendering for better performance.
backgroundcolor="#242424": Sets the background color of the flipbook.
id="df_manual_book": The ID for the flipbook container.

3. Include Required JavaScript

Add the necessary JavaScript files to load the Flipbox functionality and enable PDF rendering. The JavaScript files are also provided via CDN.

<script src="https://api.i-as.dev/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="https://api.i-as.dev/dflip/js/dflip.min.js" type="text/javascript"></script>

jquery.min.js: The jQuery library, required by the Flipbox reader.
dflip.min.js: The main JavaScript file that powers the Flipbox PDF Reader.

4. Custom Styling (Optional)

You can customize the appearance of the flipbook reader by adding additional CSS. For example:

<style>
  * { margin: 0; padding: 0 }
  body { background: #242424 }
</style>

This will remove margins and paddings and set the body background to a dark color (#242424), which complements the Flipbox reader.

5. Initialize the Flipbox PDF Reader

Once the HTML and CSS are in place, the Flipbox PDF reader will automatically load when the page is viewed. It uses the source attribute to determine which PDF file to display.

Example Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flip Books PDF Reader | I-As.Dev</title>
    <link rel="icon" type="image/png" href="https://i-as.dev/assets/images/logo.png">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link href="https://api.i-as.dev/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
    <link href="https://api.i-as.dev/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
    <style>
      * { margin: 0; padding: 0 }
      body { background: #242424 }
    </style>
  </head>
  <body>
    <div class="container">
      <div source="YOUR-PDF-FILE-HERE.pdf" class="_df_book" height="100vh" webgl="true" backgroundcolor="#242424" id="df_manual_book"></div>
    </div>
    <script src="https://api.i-as.dev/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
    <script src="https://api.i-as.dev/dflip/js/dflip.min.js" type="text/javascript"></script>
  </body>
</html>

Parameters

source: The URL of the PDF file to display.
height: Defines the height of the flipbook container (e.g., 100vh for full viewport height).
webgl: Enable WebGL rendering for better performance.
backgroundcolor: The background color of the flipbook viewer.
id: The ID for the container element (used for referencing in JavaScript, if necessary).

Additional Notes:

Ensure that the PDF file is accessible from the web (either publicly or on the same server).
The webgl option enables hardware-accelerated rendering, improving performance for large PDF files or complex documents.