Thanks a lot for purchase DFLIP jQuery Plugin!
Thank you for purchasing our jQuery Flipbook Plugin. If you have any questions that are beyond the scope of this documentation, please feel free to contact us.
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>
Usage
Follow the easy HTML setup (Example File: example-lightbox-as-in-demo.html)
<!--Button Lightbox Usage-->
<div class="_df_button"
source="http://www.yoursite.com/books/intro.pdf"
id="df_intro_button">
Intro Book</div>
<!--Thumbnail Lightbox Usage Images-->
<div class="_df_thumb"
id="df_intro_thumb"
tags="3d,images"
source="http://www.yoursite.com/books/intro.pdf"
thumb="http://www.yoursite.com/books/thumbs/intro.jpg" >
Images</div >
Normally you can just use the following jQuery based syntax:
var flipBook = $("#flipbookContainer").flipBook(source, options);
Source is either array of image paths:
var source = ["img1.jpg","img2.jpg",.....];
or string link to pdf file :
var source = "http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf";
Options are set of settings that are available for customization discussed below:
Using Images
//best to start when the document is loaded
jQuery(document).ready(function () {
var options = {height: 400, duration: 800};
var images = ['http://www.yoursite.com/books/thumbs/alice.jpg', 'http://www.yoursite.com/books/thumbs/dflip.jpg' ,
'http://www.yoursite.com/books/thumbs/nightangle.jpg'];
var flipBook = $("#flipbookContainer").flipBook(images, options);
});
Full HTML example
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Image Basic Example</title>
<link rel="stylesheet" href="">
<!-- 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">
<style>
body, html {
height:100%;
margin:0;
}
</style>
</head>
<body>
<div id="flipbookContainer"></div>
<!-- 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>
<script>
//best to start when the document is loaded
jQuery(document).ready(function () {
var options = {height: 400, duration: 800};
var images = ['http://www.yoursite.com/books/thumbs/alice.jpg', 'http://www.yoursite.com/books/thumbs/dflip.jpg' ,
'http://www.yoursite.com/books/thumbs/nightangle.jpg'];
var flipBook = $("#flipbookContainer").flipBook(images, options);
});
</script>
</body>
</html>
Using PDF
//best to start when the document is loaded
jQuery(document).ready(function () {
//uses source from online(make sure the file has CORS access enabled if used in cross domain)
var pdf = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
var options = {height: 500, duration: 800};
var flipBook = $("#flipbookContainer").flipBook(pdf, options);
});
Full HTML example
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PDF Basic Example</title>
<link rel="stylesheet" href="">
<!-- 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">
<style>
body, html {
height:100%;
margin:0;
}
</style>
</head>
<body>
<div id="flipbookContainer"></div>
<!-- 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>
<script>
jQuery(document).ready(function () {
//uses source from online(make sure the file has CORS access enabled if used in cross domain)
var pdf = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
var options = {height: 500, duration: 800};
var flipBook = $("#flipbookContainer").flipBook(pdf, options);
});
</script>
</body>
</html>
Options
To provide customization following options are available:
var options = {
//sets if to use 3d or not (true|false)
webgl: true,
//if you want to turn of shadow in 3d set it to false
webglShadow: true,
// if enable sound at start (true|false)
soundEnable: true,
// height of the container
// value(eg: 320) or percentage (eg: '50%')
// calculaton limit: minimum 320, max window height
height: '100%',
// set to true to show outline on open (true|false)
autoEnableOutline: false,
// set to true to show thumbnail on open (true|false)
autoEnableThumbnail: false,
// set to true if PDF inbuilt outline is to be removed (true|false)
overwritePDFOutline: false,
// enableDownload of PDF files (true|false)
enableDownload: true,
// duration of page turn in milliseconds
duration: 800,
//direction of flipbook
//DFLIP.DIRECTION.LTR or 1 for left to right(default),
//DFLIP.DIRECTION.RTL or 2 for right to left,
direction: DFLIP.DIRECTION.LTR,
//set as
//DFLIP.PAGE_MODE.AUTO for auto-detect(default),
//DFLIP.PAGE_MODE.SINGLE or 1 for singleview,
//DFLIP.PAGE_MODE.DOUBLE or 2 for doubleview,
pageMode: DFLIP.PAGE_MODE.AUTO,
//set as
//DFLIP.SINGLE_PAGE_MODE.AUTO for auto-detect(default),
//DFLIP.SINGLE_PAGE_MODE.ZOOM or 1 for normal zoom single view,
//DFLIP.SINGLE_PAGE_MODE.BOOKLET or 2 for Booklet mode,
singlePageMode: DFLIP.SINGLE_PAGE_MODE.AUTO,
//color value in hexadecimal
backgroundColor: "#fff",
forceFit: true, //very rare usage leave it as true unless page are not fitting wrong...
transparent: false, //true or false
hard: "none", //possible values are "hard", "none", "cover"
annotationClass: "",
autoPlay: false,
autoPlayDuration: 5000,
autoPlayStart: false,
// texture settings
maxTextureSize: 1600, //max page size to be rendered. for pdf files only
minTextureSize: 256, //min page size to be rendered. for pdf files only
rangeChunkSize: 524288,
// icons for the buttons
icons: {
'altnext': 'ti-angle-right',
'altprev': 'ti-angle-left',
'next': 'ti-angle-right',
'prev': 'ti-angle-left',
'end': 'ti-angle-double-right',
'start': 'ti-angle-double-left',
'share': 'ti-sharethis',
'help': 'ti-help-alt',
'more': 'ti-more-alt',
'download': 'ti-download',
'zoomin': 'ti-zoom-in',
'zoomout': 'ti-zoom-out',
'fullscreen': 'ti-fullscreen',
'fitscreen': 'ti-arrows-corner',
'thumbnail': 'ti-layout-grid2',
'outline': 'ti-menu-alt',
'close': 'ti-close',
'doublepage': 'ti-book',
'singlepage': 'ti-file',
'sound': 'ti-volume',
'facebook': 'ti-facebook',
'google': 'ti-google',
'twitter': 'ti-twitter-alt',
'mail': 'ti-email',
'play': 'ti-control-play',
'pause': 'ti-control-pause'
},
// TRANSLATION text to be displayed
text: {
toggleSound: "Turn on/off Sound",
toggleThumbnails: "Toggle Thumbnails",
toggleOutline: "Toggle Outline/Bookmark",
previousPage: "Previous Page",
nextPage: "Next Page",
toggleFullscreen: "Toggle Fullscreen",
zoomIn: "Zoom In",
zoomOut: "Zoom Out",
toggleHelp: "Toggle Help",
singlePageMode: "Single Page Mode",
doublePageMode: "Double Page Mode",
downloadPDFFile: "Download PDF File",
gotoFirstPage: "Goto First Page",
gotoLastPage: "Goto Last Page",
play: "Start AutoPlay",
pause: "Pause AutoPlay",
share: "Share"
},
//valid controlnames:
//altPrev,pageNumber,altNext,outline,thumbnail,zoomIn,zoomOut,fullScreen,share
//more,download,pageMode,startPage,endPage,sound
allControls: "altPrev,pageNumber,altNext,play,outline,thumbnail,zoomIn,zoomOut,fullScreen,share,download,more,pageMode,startPage,endPage,sound",
moreControls: "download,pageMode,startPage,endPage,sound",
hideControls: "",
controlsPosition: DFLIP.CONTROLSPOSITION.BOTTOM,
paddingTop: 30,
paddingLeft: 50,
paddingRight: 50,
paddingBottom: 30,
//set if the zoom changes on mouse scroll (true|false)
scrollWheel: true,
// callbacks
onCreate: function (flipBook) {
// after flip book is created is fired
},
onCreateUI: function (flipBook) {
// after ui created event is fired
},
onFlip: function (flipBook) {
// after flip event is fired
},
beforeFlip: function (flipBook) {
// before flip event is fired
},
onReady: function (flipBook) {
// after flip book is completely loaded
},
zoomRatio: 1.5,
pageSize: DFLIP.PAGE_SIZE.AUTO,
/**
* NON-OPTIONS AREA
* These options are not supposed to be sent from options variable
*/
/**
* dependency URLS (NON-OPTION):
* Do not set them as options,
* Refer to advance-examples
*/
//(NON-OPTION) source link for PDF.JS file
pdfjsSrc: "js/libs/pdf.min.js",
//(NON-OPTION) source link for PDFcompatibility.JS file
pdfjsCompatibilitySrc: "js/libs/compatibility.js",
//(NON-OPTION) source link for PDF.WORKER.JS file
pdfjsWorkerSrc: "js/libs/pdf.worker.min.js",
//(NON-OPTION) source link for THREE.JS file
threejsSrc: "js/libs/three.min.js",
//(NON-OPTION) source link for MOCKUP.JS file
mockupjsSrc: "js/libs/mockup.min.js",
//(NON-OPTION) File path to the trun sound
soundFile: "sound/turn2.mp3",
imagesLocation: "images",
imageResourcesPath: "images/pdfjs/",
cMapUrl: "cmaps/", //it's quite wierd how cmaps don't work properly with relative urls like others.. but is relative to pdf.min.js path
//(NON-OPTION) developer parameters
enableDebugLog: false,
canvasToBlob: false,//as of 1.2.9 canvas are better optimized and secure
enableAnnotation: true,
pdfRenderQuality: 0.90,
/**
* Let them be, change at your risk
*/
// if texture fallback override is required
// note: if set to anything other than "blank" the first page is changed
// recommended : "blank"
textureLoadFallback: "blank", //"images/textures/white.jpg",
// controls the flexibility of the paper more value for more flexiblilty
stiffness: 3,
// minTopOffset: 30,
// link to the images file that you want as background.
// supported files are jpgs,png. smaller files are preffered for performance
backgroundImage: "",//"images/textures/el.jpg",
// or any number like 5, 500. recommended: "auto"
pageRatio: null, //equals to width/height
pixelRatio: window.devicePixelRatio || 1,
thumbElement: 'div',
/*3D settings*/
spotLightIntensity: 0.22,
ambientLightColor: "#fff",
ambientLightIntensity: 0.8,
shadowOpacity: 0.15
};
Support
If you get stuck...
Before contacting us, please make sure that you:
- Read this documentation carefully,
If you didn't find answer to your problem, please ask your question on the item discussion page or send us a private message from our support page and we will reply via email.
IMPORTANT!
For the fast troubleshooting, please send us detailed information about the
issue and make sure that you don't forget to send us your site url where you are using / want to use
the item. Please note, that we cannot troubleshoot efficiently from screen-shots.
Please take some time until we respond (usually in 24 - 48 hours).