Docs - surajkhanal/dearflip-js-flipbook GitHub Wiki

Welcome to Dearflip JS Docs.

You can follow these steps to start using DearFlip. If you have any questions or need assistance, please don’t hesitate to contact us.

File Structure & Template

Welcome to the starting guide of DearFlip, previously dFlip, jQuery Flipbook plugin. Once you have downloaded the file, you can extract the zip file and see there is a dflip folder. That’s the folder that we will be using to get started.

File Structure

DearFlip, also known as dFlip, flipbook plugin is jQuery based. Basically you can copy the files in folder to your working directory. We recommend copying the whole dflip folder as it is.

dflip/
  β”œβ”€β”€ css/
  β”œβ”€β”€ fonts/(fonts folder are not used since 2.0)
  β”œβ”€β”€ images/
  β”œβ”€β”€ sound/
  └── js/
      └── libs/

// In older versions, before v1.4.2, dflip folder was expected in the root where the html file is served.
// if not the location was required to be indicated.
// As of version 1.4.2, (not required in normal conditions, will be auto-detected)
var dFlipLocation = "http://www.yoursite.com/dflip/";

File Template

And ensure the following files are included in the HTML.

CSS

<link href="http://www.yoursite.com/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<!-- themify-icons.min.css is not required in version 2.0 and above -->
<link href="http://www.yoursite.com/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">

JavaScript Note: Include them just before </body> tag. Don’t use them in head.

<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>

Basic HTML Template(below v2.0)

<!DOCTYPE html>
<HTML>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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">
    <!-- themify-icons.min.css is not required in version 2.0 and above -->
    <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>

id="flipbook_example" can be used to extend the functionality and features of that flipbook.

Basic HTML Template(v2.0 and above)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">

</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>

id="flipbook_example" can be used to extend the functionality and features of that flipbook.

Basic Usages

You can create flipbooks as embedded, or light-boxes by using the related CSS classes.

  • _df_book : Creates a embedded flipbook
  • _df_thumb : Creates a thumbnail that will open as a popup flipbook
  • _df_button : Creates a button that will open as a popup flipbook
  • _df_custom : Wraps anything inside the element to trigger a popup flipbook.

SEE EXAMPLES

Using HTML (Recommended) Embedded will be created with page load and ready to use, where as light-boxes will be like popup that need to be open just like apps in mobile phones.

<!--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>

LightBox Popup Examples

Using HTML and JavaScript (Recommended) You can use images and PDFs as source, while PDFs source can be provided as html attribute images need to be added through JavaScript as array – detailed in example below.

In the above usage you create only embed mode flipbook. so that usage is limited. We use and recommend the CSS and option method for best results. You can see this used in the flipbook examples page.

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

//Just add option_ in front of the element id to create the required option variable
var option_button_pdf = {
    source:'http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf',
    webgl:true,
    height:500
    //we recommend using default auto height
};

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
};

JavaScript variable can be added anywhere just make sure it’s available before page load.

Element id : button_pdf, option variable name : option_button_pdf

⚠️ **GitHub.com Fallback** ⚠️