DearFlip JS Flipbook Documentation

repository·master·Indexed 18 days ago

https://github.com/dearhive/dearflip-js-flipbook

A jQuery-powered JavaScript plugin used to create realistic 3D and 2D flipbooks from PDF files or image sequences. It provides a front-end viewer solution for web environments with support for embedded usage, button lightboxes, and thumbnail lightboxes.

Tokens: 1.4K
Snippets: 4
Records: 4
Agent score: 14%

What's inside DearFlip

Create a basic HTML template for DearFlip

master

To integrate DearFlip, include the required CSS and JavaScript files in your HTML. Note that themify-icons.min.css is required for version 1.x but not for version 2.0 and above.

Required assets:

dflip.min.css
themify-icons.min.css (for older versions)
jquery.min.js (dependency)
dflip.min.js

Example template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Template</title>

    <!-- Flipbook StyleSheets -->
    <link href="http://www.yoursite.com/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
    <link href="http://www.yoursite.com/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="_df_book" id="flipbok_example" source="location of pdf.pdf"></div>

    <!-- Scripts -->
    <script src="http://www.yoursite.com/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.yoursite.com/dflip/js/dflip.min.js" type="text/javascript"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Template</title>

    <!-- Flipbook StyleSheets -->
    <link href="http://www.yoursite.com/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
    <link href="http://www.yoursite.com/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="_df_book" id="flipbok_example" source="location of pdf.pdf"></div>

    <!-- Scripts -->
    <script src="http://www.yoursite.com/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.yoursite.com/dflip/js/dflip.min.js" type="text/javascript"></script>
</body>
</html>

Set up the DearFlip file structure
master
DearFlip (dFlip) is a jQuery-based plugin. To use it, copy the dflip folder into your working directory. The folder structure should look like this:
```
dflip/
  ├── css/
  ├── fonts/ (not used in v2.0+)
  ├── images/
  ├── sound/
  └── js/
      └── libs/
```
As of version 1.4.2, the plugin attempts to auto-detect its location. If it is not located in the root where the HTML file is served, you can manually specify the location using the dFlipLocation variable:
```
var dFlipLocation = "http://www.yoursite.com/dflip/";
```
```
var dFlipLocation = "http://www.yoursite.com/dflip/";
```
https://github.com/dearhive/dearflip-js-flipbook/blob/master/README.md

Use HTML syntax for different Flipbook modes

master

You can trigger different DearFlip behaviors using specific CSS classes and the source attribute:

Embedded Usage: Renders the flipbook directly in the page using the _df_book class.
Button Lightbox Usage: Creates a clickable button that opens the flipbook in a lightbox using the _df_button class.
Thumbnail Lightbox Usage (Images): Creates a thumbnail-based entry point using the _df_thumb class. It requires tags="3d,images" and a thumb attribute pointing to the thumbnail image.

<!--Embedded Usage--> 
<div class="_df_book" source="http://www.yoursite.com/books/intro.pdf"></div>

<!--Button Lightbox Usage--> 
<div class="_df_button" source="http://www.yoursite.com/books/intro.pdf"> Intro Book</div>

<!--Thumbnail Lightbox Usage Images-->
<div class="_df_thumb" source="http://www.yoursite.com/books/intro.pdf"
     tags="3d,images" thumb="http://www.yoursite.com/books/thumbs/intro.jpg">Images</div>

<div class="_df_book" source="http://www.yoursite.com/books/intro.pdf"></div>

<div class="_df_button" source="http://www.yoursite.com/books/intro.pdf"> Intro Book</div>

<div class="_df_thumb" source="http://www.yoursite.com/books/intro.pdf"
     tags="3d,images" thumb="http://www.yoursite.com/books/thumbs/intro.jpg">Images</div>

Extend Flipbook behavior with options

master

You can customize flipbook behavior by defining JavaScript objects. To link an options object to a specific HTML element, prefix the object name with option_ followed by the element's id.

PDF Flipbook with Options

<div class="_df_button" id="button_pdf">Dflip Manual</div>

var option_button_pdf = {
    source:'http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf',
    webgl:true,
    height:500
};

Image Flipbook with Options

For image flipbooks, the source should be an array of image URLs.

<div class="_df_button" id="button_image">Dflip Pictures</div>

var option_button_image = {
     source : [
         'http://www.yoursite.com/books/thumbs/alice.jpg',
         'http://www.yoursite.com/books/thumbs/dflip.jpg',
         'http://www.yoursite.com/books/thumbs/nightangle.jpg'
     ],
     webgl:true
};

<div class="_df_button" id="button_pdf">Dflip Manual</div>
<div class="_df_button" id="button_image">Dflip Pictures</div>

var option_button_pdf = {
    source:'http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf',
    webgl:true,
    height:500
};

var option_button_image = {
     source : ['http://www.yoursite.com/books/thumbs/alice.jpg',
               'http://www.yoursite.com/books/thumbs/dflip.jpg',
               'http://www.yoursite.com/books/thumbs/nightangle.jpg'],
     webgl:true
};