1. Home
  2. Docs
  3. DFlip jQuery Plugin
  4. Getting Started

Getting Started

 

File Structure

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 Dflip folder..

dflip/
  ├── css/
  │   ├── dflip.css
  │   └── themify-icons.css
  │
  ├── fonts/
  │   ├── themify.eot
  │   ├── themify.svg
  │   ├── themify.ttf
  │   └── themify.woff
  │
  ├── images/
  │   └── loading.gif
  |
  ├── sound/
  │   └── turn2.mp3
  │
  └── js/
      ├── dflip.js
      ├── dflip.min.js
      └── libs/
          ├── jquery.min.js
          ├── pdf.min.js
          ├── pdf.worker.min.js
          ├── three.min.js
          └── mockup.min.js
//if you not are following above folder structure define where the files are
//dflip assets location is other domain or folder.. once is enough
//(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:

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

 

Articles

Was this article helpful to you? Yes No