View Categories

File Structure & Template

2 min read

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.

Contents hide
1 File Structure
2 File Template
2.1 CSS:
2.2 JavaScript
2.3 Basic HTML Template(below v2.0)
2.4 Basic HTML Template(v2.0 and above)

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.

Leave a Comment