1. Home
  2. Docs
  3. DearFlip jQuery Flipbook Plugin
  4. Getting started – usage and options

Getting started – usage and options

Welcome to the starting guide of DearFlip, previously dFlip, jQuery Flipbook plugin. Once you have downloaded the file from codecanyon, 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/
  ├── 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.css" rel="stylesheet" type="text/css">
<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.

<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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Basic HTML Template</title>

<!-- Flipbook StyleSheets -->
<link href="http://www.yoursite.com/dflip/css/dflip.css" rel="stylesheet" type="text/css">
<link href="http://www.yoursite.com/dflip/css/themify-icons.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: Click on these thumbs and buttons

Dflip Manual
Images
Dflip Manual

 

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

jQuery Function:

We do support jQuery function with selector, but we don’t recommend because of it’s technical requirements to insert inside proper jQuery ready function or called after everything has been loaded.

//best to start when the document is loaded
jQuery(document).ready(function () {</code class=" language-javascript">

    //For IMAGES
    var flipBook_images = $("#flipbookContainer").flipBook({
              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']
    });

    //FOR PDFs
    var flipBook_pdf = $("#flipbookContainer").flipBook({
              source = "http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf"
    });
));

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

 

Was this article helpful to you? Yes No

Leave a Reply