3D FlipBook - Documentation

Introduction

3D FlipBook project uses modern technologies (new JavaScript generation (ES6), jQuery, ThreeJs), but you need little skills for simple using it in your projects. If you do not want to research the project and just want to use finished product then go to next section, in other case go here. For advanced using you need to have some programming skills.

Simple using

It is necessary to install any web server because the plugin uses AJAX.

Scripts

Add next scripts resources to your page.

    <script src="js/jquery.min.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <script src="js/three.min.js"></script>
    <script src="js/pdf.min.js"></script>

    <script src="js/3dflipbook.min.js"></script>
  

jQuery, html2canvas, Three, PdfJs are free libraries, you can easily find them in the Internet or copy from /proj/js/libs. Do not forget to copy pdf.worker.js and default-book-view.js in js directory. 3dflipbook.min.js is placed in /proj/js/dist. It is built 3D FlipBook project.

Copy images, css, fonts and templates directories from /proj to your web server. templates contains 3D FlipBook view template, if it is necessary you can customize it.

For creating 3D FlipBooks there are two ways. The first - using HTML tag and the second - jQuery function.

PDF with default presets

  <div class="flip-book-container" src="example.pdf">

  </div>

To see live demonstration go to the example.

Using HTML is limited just for PDFs because it is not convenient to pass the options through HTML tag attributes.

General approach

Before calling FlipBook factory function you need define options, where you should specify book type, properties customization function, pages quantity and so on. See the code below.

  var options = {
    pdf: 'example.pdf', // you should use this property or pageCallback and pages to specify your book
    pageCallback: function(n) { // this function has to return source description for FlipBook page
      // for image sources
      var imageDescription = {
        type: 'image',
        src: 'example/' + n + '.jpg',
        interactive: false
      };
      // for html sources
      var htmlDescription = {
        type: 'html',
        src: 'example/' + n + '.html',
        interactive: true // or false - if your page interact with the user then use true
      };
      // for blank page
      var blankDescription = {
        type: 'blank'
      };
      return htmlDescription; // or imageDescription or blankDescription
    },
    pages: 10, // amount of pages
    controlsProps: { // set of optional properties that allow to customize 3D FlipBook control
      downloadURL: 'example.pdf'
    }
    propertiesCallback: function(props) { // optional function - it lets to customize 3D FlipBook
      props.page.depth /= 2;
      props.cover.binderTexture = 'exampleTexture.jpg';
      props.cssLayersLoader = function(n, clb) {// n - page number
        clb([{
          css: '.heading {margin-top: 200px;background-color: red;}',
          html: '<h1 class="heading">Hello</h1>',
          js: function (jContainer) { // jContainer - jQuery element that contains HTML Layer content
            console.log('init');
            return { // set of callbacks
              hide: function() {console.log('hide');},
              hidden: function() {console.log('hidden');},
              show: function() {console.log('show');},
              shown: function() {console.log('shown');},
              dispose: function() {console.log('dispose');}
            };
          }
        }]);
      };
      return props;
    },
    template: { // by means this property you can choose appropriate skin
      html: 'templates/default-book-view.html',
      styles: [
        'css/black-book-view.css'// or one of white-book-view.css, short-white-book-view.css, shart-black-book-view.css
      ],
      links: [{
        rel: 'stylesheet',
        href: 'css/font-awesome.min.css'
      }],
      script: 'js/default-book-view.js',
      printStyle: undefined, // or you can set your stylesheet for printing ('print-style.css')
      sounds: {
        startFlip: 'sounds/start-flip.mp3',
        endFlip: 'sounds/end-flip.mp3'
      },
      pdfLinks: {
        handler: function(type, destination) { // type: 'internal' (destination - page number), 'external' (destination - url)
          return true; // true - prevent default handler, false - call default handler
        }
      },
      autoNavigation: {
        urlParam: 'fb3d-page', // query param for deep linking
        navigates: 1 // number of instances that will be navigated automatically
      }
    }
    ready: function() { // optional function - this function executes when loading is complete

    }
  };
  var book = $('container-selector').FlipBook(options);

For more details see examples: simple PDF, PDF links & bookmarks, controls customization.

If you decide to remove created FlipBook from the page you should use next code.

  book.dispose();

To see live demonstration it needs to start web server from /proj/public. It is recommended to have a look at examples.

Using in frameworks, MVC, CMS

You can easily use 3D FlipBook in any projects but you need to take care about its resources. It means that you should specify all paths for template files and set path for pdfJsWorker. To do this add next script before <script src="js/3dflipbook.min.js"></script>

  
    <script type="text/javascript">
      window.PDFJS_LOCALE = {
        pdfJsWorker: 'js/pdf.worker.js'
      };
    </script>
  

But you need to set your path instead of the relative one. Do the same with book option template.

Advanced using

Installing

Install Node.js. Then open /proj in console and use command

  npm install

When the installation finished you can run local server with documentation and examples

  npm run public

Open the browser and go to http://localhost:4040

Build system

Webpack is used for project building. All predefined commands are described in next table.

It is possible to bundle some of global libraries (jQuery, ThreeJs, html2canvas). See GLOBAL_LIBS in file /proj/webpack.config.js.

Project structure

Properties

3D FlipBook has a lot of customization options, the most useful you can find in tables below.

Book properties

Sheet properties

Cover properties

Page properties

Book control properties

3D FlipBook control has very wide range of properties that help to customize it for a user. It lets to bind keys or mouse events for some commands, change default presets for zoom level and range, lighting level and range. It allows to disable some commands.

Zoom settings

Lighting settings

Pan settings

Actions

Action object properties

All actions have properties enabled - true or false and code - scan code of pressed key or mouse button - Left = 0 or Middle = 1 or Right = 2 or amount fingers on touch screen - 1, 2, 3.

For actions that names start with mouseCmd and cmd there is a property flags - combination of holding keys - Ctrl = 1, Shift = 2 and Alt = 4.

For actions start with cmd you can set property type - it is name of the event that you want to bind with this action - keydown, keyup, keypress, mousedown, mouseup, mousemove, click, dblclick, touchstart, touchmove, touchend. By default type = 'keydown'.

Actions cmdSmartPan, cmdStats, cmdSinglePage, cmdSounds have property active - true or false. It lets to activate a mode or an element by default.

Action cmdSinglePage has additional property activeForMobile - true or false. The same that active but just for mobile devices.

For details see the example.

San codes

Foreign libraries

• jQuery - cross browser compatibility and simplifying a lot of operations;
• ThreeJs - managing 3D objects;
• PdfJs - rendering PDFs;
• html2canvas is used just for not supporting SVG foreignObject browsers to render HTML.