DearFlip jQuery Flipbook Plugin

  2. Home
  4. Docs
  6. DearFlip jQuery Flipbook Plugin
  8. 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.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.

 

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(Not recommended):

We do support jQuery function with selector, but we don’t recommend it because of its technical requirements to insert inside proper jQuery ready function or called after everything has been loaded. Don’t use predefined classes like _df_book, _df_thumb, _df_button, _df_link with jquery function syntax.

<div id="flipbookImageContainer"></div>
<div id="flipbookPDFContainer"></div>
//best to start when the document is loaded
jQuery(document).ready(function () {

    //For IMAGES
    var source_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 option_images = {webgl:true};

    var flipBook_images = $("#flipbookImageContainer").flipBook(source_images,option_images);

    //FOR PDFs 
    var source_pdf = "http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf";
    var option_pdf = {webgl:true};

    var flipBook_pdf = $("#flipbookPDFContainer").flipBook(source_pdf,option_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 "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
  };

 

24 thoughts on “Getting started – usage and options”

  1. Hi Support Team,
    I bought the plugin and current I try to find a sample to integrate share option from the plugin. When user click on the share icon, it will show the link. When we copy and paste the link with an new browser tab, it should automatically open the PDF. I saw the sample on the page (https://dearflip.com/flipbook-examples/#flipbook-3d-flipbook) work like a charm but I cannot find a sample configuration or example to do it. Could you help to guide me how to do so?

    Here is a website that I integrate the plugin: https://unidistance.ch/institut/documentation/

    Reply

    • Hi,
      If you have bought the plugin Use the contact form in CodeCanyon used by premium customers.
      And also you are not using the version distributed in the premium market. Download the latest version from CodeCanyon and try first.

      Best,
      DearHive

      Reply

  2. Hi,

    I would like to purchase your plug-in.

    I am interested in particular to the life-time license. Only one question: does it provide also the updates over the time?

    Thanks
    Fabio

    Reply

    • Hi,

      Yes with lifetime license, all the future updates will be available under your account. If you are using WordPress version then, the updates will be available right from the plugin page – similar to plugins from wordpress repository.

      Best,
      DearFlip

      Reply

  3. Hello,
    we just tried

    jQuery(document).ready(function() {
    var flipBook_images = jQuery(“#flipbookContainer”).flipBook({
    source = [‘images/book/page.1.8.png’,
    ‘images/book/page.1.8.png’ ,
    ‘images/book/page.1.8.png’]
    });
    });

    jQuery(document).ready(function() {
    var flipBook_images = jQuery(“#flipbookContainer”).flipBook({
    source : [‘images/book/page.1.8.png’,
    ‘images/book/page.1.8.png’ ,
    ‘images/book/page.1.8.png’]
    });
    });

    but we receive JS error all the time
    how to proceed?

    Thank You

    Reply

  4. Hi.
    We need to combine dflip with unreal engine.
    but explain makes me confused.
    So, can we use this solution to that?
    if it is possible, then we’ll bye this.

    Best,
    Lero

    Reply

  6. Hey,

    is it possible to use transparency in the PDFs to show? I see an option for “transparent: true”, but this is for the whole background of the and not the pdf itself. PDF.js should be able to “read”/show transparent PDFs as transparent, but i’m not sure what lib you implemented?

    Thank you,
    Sincerely.

    Reply

    • Hi,

      Transparent pages are not supported.
      We do use PDF.js and it might be able to render transparent pages, but that is a very edge case so it is not available in the plugin.
      Best,
      DearFlip Team.

      Reply

  10. Hello, good day, I am interested in the add-on, I want to know if it is possible to implement it, in such a way that it is versatile, that is, if I send the location of the pdf and read it directly
    Thank you

    Reply

  12. Hello,

    It’s really weird that i cant’ put my code here. So again.

    Is there a trigger-like function that can regenerate a new book when the div._df_book’s source attribute dynamically changed every time? I’m using React.

    BTW DearFlip is ab awesome PDF plugin!

    Thanks!

    Reply

    • Hi,

      Just destroy the old flipbook and create new one.

      var flipbook = jQuery("#flipbook_element").flipBook(options);

      then destroy
      flipbook.dispose();

      and create again
      flipbook = jQuery("#flipbook_element").flipBook(options);

      Much similar to what we do with lightbox (popup)

      Reply

Leave a Comment