Skip to content
DearFlip – Convert PDF to Interactive 3D Flipbooks
  • Plugins
    • WordPress Flipbook
    • Joomla Flipbook
    • Javascript Flipbook
  • Demos
    • Embedded Example
    • Popup Examples
    • Online PDF Viewer
  • Pricing
  • Docs
  • Support
  • Account
  • Blog
DearFlip – Convert PDF to Interactive 3D Flipbooks
  • Plugins
    • WordPress Flipbook
    • Joomla Flipbook
    • Javascript Flipbook
  • Demos
    • Embedded Example
    • Popup Examples
    • Online PDF Viewer
  • Pricing
  • Docs
  • Support
  • Account
  • Blog

Getting Started

  • Getting started
  • File Structure & Template
  • Basic Usages
  • Options List

FAQs

  • Support and FAQs
  • License Activation
  • Why are there PHP files in download zip file?

Examples

  • Examples
  • Basic – Flipbook using HTML
  • Basic – Using options
  • Adding Outline/Table of Content
  • Adding Search

Customizations

  • Translate UI texts
  • Customize Loading
  • onPageChanged
  • Customizations
  • Open flipbook in full-screen
  • onReady Function
  • PDF links custom class and usages
  • Update URL hash on the address bar when a page flips
  • How to add custom share button?

Advanced Customizations

  • Add Close button to ToolBar
  • Advanced Customizations
  • Store last viewed flipbook page
  • Add Custom Button to Flipbook
  • Add Custom Download button to Flipbook
  • Add print button to flipbook
  • Add Custom Zoom Reset button to Flipbook
  • Thumb animation on page scroll
  • Load more button for lightboxes
  • Reset flipbook zoom on flip
View Categories
  • Home
  • Documentation
  • Getting Started
  • Options List

Options List

Options and advanced usage: #

Consider you want to use the options and features, you can use directly with JavaScript by using HTML element ID.. and related option variable.

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)
showDownloadControl: true,
showSearchControl: true,
showPrintControl: 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 "all", "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
};

Updated on December 26, 2024

More Inquiry/Info & COMMENTS:

All DearFlip comments and discussion have been moved to
https://github.com/dearhive/dearflip-js-flipbook/discussions

Table of Contents
  • Options and advanced usage:

Links

  • Terms and Conditions
  • License Terms
  • Privacy Policy

Recent Posts

  • Calendar Mode(Beta) June 22, 2025
  • Best Flipbook Javascript Plugins with Pros and Cons December 16, 2024
  • PDF Partial Loading – What, How and Why? September 28, 2023
  • PDF Hyper Links are not working? What is the issue? December 17, 2021
  • How Does Flipbook Size Work and How Can I Make It Larger? May 23, 2021

Categories

  • Blog (5)
  • Flipbook PDF Related Articles (7)
  • Tutorials (5)

Examples

  • JavaScript Flipbook Popup Examples
  • DearFlip – Convert PDF to Interactive 3D Flipbooks

Explore

  • Terms and Conditions
  • License Terms
  • Privacy Policy
Thanks for the visit. Create amazing 3D Flipbooks in your Worpdress site with dFlip Flipbook Wordpress Plugin. Also Available as dFlip jQuery Flipbook Plugin. For PowerPoint related info visit Dear Slides and get free powerpoint templates.

Recent Posts

  • Calendar Mode(Beta)
  • Best Flipbook Javascript Plugins with Pros and Cons
  • PDF Partial Loading – What, How and Why?
  • PDF Hyper Links are not working? What is the issue?
  • How Does Flipbook Size Work and How Can I Make It Larger?

Products

  • DearFlip WordPress Flipbook
  • DearFlip 3D Flipbook JS Plugin
  • Online PDF Viewer
  • DearFlip PDF Flipbook for Chrome
© 2025 | A product of DearHive.com