iberezansky/flip-book-jquery

3D FlipBook allows to browse images, PDFs or HTMLs as a flipping book. It helps to attract user attention and make more impression on him.

3D FlipBook jQuery plugin

3D FlipBook is jQuery plugin that allows to browse images, PDFs or HTMLs as a flipping book. It can be used for demonstration magazines, books, cards, brochures, booklets and much more in natural way. It helps to attract user attention and make more impression on him.

Start from the live preview.

Main features

Version 1.7

• RTL mode
• Default template option in General Settings

Version 1.6

• CSS Layers
• Languages

Version 1.5

• PDF search

Version 1.4

• Thumbnails
• Flip sounds
• Deep linking

Version 1.3

• PDF bookmarks
• Printing
• Single page mode
• Control customization
• Fit view command
• Controllable script for templates

Version 1.2

• PDF links
• Mobile-Friendly
• Flipping sheet animation style
• Loading animation and progress

Version 1.1

• Smart pan mode
• Skins
• Flipping covers together with other pages

Version 1.0

• Realistic view
• Natural behaviour
• Flixible page corners
• User behaviour prediction system
• HTML, PDF, images as sources
• User friendly
• High perfomance
• Lightbox effect
• Interactive
• Responsive
• Easy to use
• Well documented

Details

Realistic view

3D FlipBook allows to create volume book, with page thickness. It is the most exact computer model of a book or a magazine from real world.

The plugin is able to simulate book opening process. Modeled book repeat the same actions as its real prototype: while the cover is opening or closing the internal pages are deforming as it happens in life. The deformation can be customized. You can reduce it or switch off.

Natural behaviour

The plugin is called 3D FlipBook, for sure, it can perform page flipping animation.

But this is very common ability so all typical plugins are able to do it. 3D FlipBook allows to customize the shape of flipping pages but it is still not enough to be unique.

The main feature is using specially designed physics engine that perform all interaction with a user. This engine is based on physics laws so all user actions with the model seems realistic. The plugin allow you drag and throw pages together. The engine solve the collisions and show natural scene.

Physics engine has a lot of properties: gravity, mass, flexibility, page flipping velocities and much more. But it is little necessary to know for using the plugin because all those properties have default presets.

Flexible page corners

The main goal of 3D FlipBook is maximum user friendly. Main key of being friendly is behave in habitual for user way. How are we used to turn pages in books? - of course it is dragging a page while holding a corner! 3D FlipBook is one known 3D plugin that has such feature.

Skins support

Supporting skins makes customization very easy. It is necessary just to choose appropriate skin and that is all. Now there are available skins for light and dark themes - the most universal ones.

Smart pan

3d FlipBook has smart algorithm to show the book in maximum comfortable and appropriate for user way. It automatically chooses book scale and alignment on the screen, disallows user to drag the book out of view port. The pan makes only smooth moves that seems very friendly for user. All these abilities help the book to look richer.

HTML, PDF, images as sources

The plugin can use PDF, images and HTMLs as texture for pages. Supporting HTML format as texture is a new technology no one of other plugins support it. HTML allow easily create interactive books, handle user events, manage plugin behaviour. Using HTML textures is next important step in development web animation.

User behaviour prediction system

The plugin is not just pretty but it is smart. It has user behaviour prediction system. 3D FlipBook tracks user actions and try to predict next necessary pages. In the background it loads predicted pages and renders them. When the user go to next page it is ready to be shown.

3D FlipBook uses priorities for page loading. First of all it loads visible for user pages then predicted ones. It is possible to customize amount of pages to predict and quantity of used by user pages for predicting his behaviour.

User friendly

3D FlipBook is designed to be maximum user friendly. It has familiar to user page flipping control. Flexible corners help user to understand that he can turn the page by means drag and drop technology. Physics engine computes page transforms in similar to real world way. Modeling book is close to natural book - it has the same volume and shape. It is possible to use hard flat covers to create hard bending and use flexible pages, make whole book flexible or flat.

The plugin has specially designed animation of page loading process. It is created automatically for different page colors. 3D FlipBook computes animation colors as inversion of page color. It looks nice for all colors.

3D FlipBook supports fullscreen mode. It is comfortable to watch magazines in this mode, they look like alive.

Sometimes it is useful to change lightning. 3D FlipBook gives to its users such ability. User can change lightning to do it appropriate for him. It is important option for reading long texts.

High performance

The plugin performance does not depend on number of pages because it does not manage single pages. 3D FlipBook works with blocks of pages, it allows to keep in memory just visible for user pages. So if the book is closed then there are 2 or 3 blocks. The first is left cover, the second is right cover and third is internal pages. If the book is opened there can be two blocks for left and right internal pages. There can be more blocks just when the flipping animation is performing. The plugin has no problem with more than 50 simultaneously flipping blocks. When the turn is finished the turned block merges with neighbour block.

For fast rendering 3D graphics 3D FlipBook uses WebGL. WebGL is a API for creating interactive 3D graphics without using plugins.

Interactive

Supporting HTML opens wide abilities for creating interactive books. It allows to use CSS3 and JavaScript, create navigation, use hover effects and much more.

Responsive

3D FlipBook is designed to occupy whole container where you place it. So if the container size changes the plagin recompute its dimensions. So keep the container responsive and plugin will be responsive too.

Easy to use and customize

3D FlipBook is well documented, has a lot of examples and getting started manual. It is easy to start. The plugin supports skins, so it is possible to create own skins or customize style or template files of existing.

The plugin has a lot of customization options (see the documentation). If it is not enough you can edit the project. It is written in modern JavaScript (ES6) object oriented style. Very easy to understand how it works.

How to use

See the example.

Rebuilding

Clone a copy of the main git repo by running:

git clone https://github.com/iberezansky/flip-book-jquery.git

Enter the flip-book-jquery-example directory and run the installation:

cd flip-book-jquery && npm install

To build debug version:

npm run build-debug

To build production version:

npm run build-production

flip-book-jquery's Issues

Bug in search term highlight when in first page, and solution

There is a bug regarding the highlight of a search term in the first page.

It happens because in SearchEngine.prototype.process the page is getting incremented before highlight so page 0 never gets highlighted.

++_this.page;
if (_this.onPageHitsChanged) { _this.onPageHitsChanged(_this.page, _this.query); }

the ++_this.page must become _this.page++ and go after the if statement

TypeError: Cannot read property 'EventDispatcher' of undefined

Not working with react
`TypeError: Cannot read property 'EventDispatcher' of undefined
eval
node_modules/babel-loader/lib/index.js??ref--6-oneOf-2!/.../node_modules/3d-flip-book/dist/flip-book.js:12429:3
12426 | }
12427 |
12428 | return Orbit;

12429 | }(_libs.THREE.EventDispatcher);
| ^ 12430 |
12431 | exports.default = Orbit;
12432 | /***/`

TypeError: Cannot read property 'GlobalWorkerOptions' of undefined

Hi there, since the new update to Version 1.9.22 my flipbooks no longer work and this error is being returned. Has there been significant changes in the last update and is there any way to rollback?

Bug when dragging canvas

I believe there is a bug when built in browser dragging takes place.
user-select: none seems to fix it!

Can I use it to show up and down pages of publications?

like some calendars.

How to use it with react js

"UnexpectedResponseException" 0 Response from server

I tried testing this package in a laravel application but I kept receiving this error in the console.

"Unexpected server response (0) while retrieving PDF "http://127.0.0.1:8000/test/src/test.pdf"."

Reproduce

Create a new laravel application, add this package into a blade and add your pdf into src/ folder in a test folder in the project root like this public/test/src Also include all neccessary files in the same test folder. My Blade looks like this

<x-guest-layout>
    @section('styles')

        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }

            .solid-container {
                height: 100vh;
            }
        </style>
    @endsection
    <div class="solid-container"></div>


    <script src="{{ asset('js/core/jquery.min.js') }}"></script>
    <script src="{{ asset('test/js/html2canvas.min.js') }}"></script>
    <script src="{{ asset('test/js/three.min.js') }}"></script>
    <script src="{{ asset('test/js/pdf.min.js') }}"></script>

    <script src="{{ asset('test/js/3dflipbook.min.js') }}"></script>
    <script type="text/javascript">
        $('.solid-container').FlipBook({
            pdf: '{{asset('test/src/test.pdf')}}'
        });
    </script>
</x-guest-layout>

Expected Result

Pdf should be displayed like it did in the demo app that i was testing with.

Result

Pdf files keeps coming as a downloadable file in my browser and the error on the console is as if the plugin is expecting a particular header response type which is not properly returned.

Angular 10 support

Hi,
Do you have support for Angular 10 and Typescript?

payment issue

hello team ,

i want to buy this product i follow below link but there is no debit card option and when itry by paypal its failed again and again , i am from india

https://codecanyon.net/item/interactive-3d-flip-book-with-physicsbased-animation-jquery-plugin/19113743?ref=iberezansky--

blob instead of pdfUrl

Hello

Can I set blob to display pdf file instead of pdfUrl?
Or is there any way to set the pdfUrl to a website requiring authentication (needs to set bearer token in the HTTP header)?

use dom instead of html source file?

in the examle

function preview(n) {
  return {
    type: 'html',
    src: 'books/html/preview/'+(n%3+1)+'.html',
    interactive: true
  };
}

can use dom intead of html source file?

like:

function preview(n) {
  return {
    type: 'html',
    src: $('.example')[0],
    interactive: true
  };
}

responsive on mobile device

I use the default example https://github.com/iberezansky/flip-book-jquery-example,

but it can't responsive perfect on mobile device like link removed

Propegating touch events from html pages

Hi im struggeling with touch events when im using the minified filed, becaues then touch seems to be enabled by default and that fucks up the propegation of htlm pages inside the reader.

But I change to the not minified file and then I could not swipe pages, but links works fine.

Do you have a suggestion to what to do to be able to have links and swipe work for the min file?

I have just worked with this a couple of hours now so just seeking advice from someone who have used it more than me!

Single or Double-Page PDF

Hi
First: this is an amazing project. Thank you.
Currently I have a test project where PDF documents are only single or double paged; but flipbook always shows 4 pages (2 or 3 empty pages).
Is there any option only to show existing pages? I know it's a flipbook, but I don't want to use an other display system for singlepager.
Thank you
Joachim
P.S. Right now I testing only with the github version but I will licence your software soon when the project makes the step out from testing to real development :-)

I have pdf with 132 pages yet only 10 pages are loading .I am using your default template

http://ethos2.eblue-hosting.co.uk/my-account/ login to this with username : [email protected] and password : admin@12345 and open this link http://ethos2.eblue-hosting.co.uk/loading-flipbook/?pid=http://ethos2.eblue-hosting.co.uk/wp-content/uploads/19-01-21-Ethos-13-Pages-LOW-RES-For-Nick.pdf . the pdf is of 132 pages (http://ethos2.eblue-hosting.co.uk/wp-content/uploads/19-01-21-Ethos-13-Pages-LOW-RES-For-Nick.pdf ) but i can view only 10 .Also note i have increase max_input_vars 10000 but still no problem was solved

Using With Angular 5

Hello,
I'm trying to use the 3d-flip-book with the angular 5 but I always get this error in the console:
flip-book.js:7197 Uncaught TypeError: frontGeometry.translate is not a function
at Object.eval (flip-book.js:7197)
at webpack_require (flip-book.js:20)
at Object.eval (flip-book.js:901)
at webpack_require (flip-book.js:20)
at Object.eval (flip-book.js:5532)
at webpack_require (flip-book.js:20)
at Object.eval (flip-book.js:3406)
at webpack_require (flip-book.js:20)
at Object.eval (flip-book.js:2786)
at webpack_require (flip-book.js:20)
(anonymous) @ flip-book.js:7197
webpack_require @ flip-book.js:20
(anonymous) @ flip-book.js:901
webpack_require @ flip-book.js:20
(anonymous) @ flip-book.js:5532
webpack_require @ flip-book.js:20
(anonymous) @ flip-book.js:3406
webpack_require @ flip-book.js:20
(anonymous) @ flip-book.js:2786
webpack_require @ flip-book.js:20
(anonymous) @ flip-book.js:12591
webpack_require @ flip-book.js:20
(anonymous) @ flip-book.js:66
(anonymous) @ flip-book.js:69
../../../../3d-flip-book/dist/flip-book.js @ vendor.bundle.js:6
webpack_require @ inline.bundle.js:55
(anonymous) @ app.component.ts:3
../../../../../src/app/app.component.ts @ main.bundle.js:28
webpack_require @ inline.bundle.js:55
(anonymous) @ app.module.ts:5
../../../../../src/app/app.module.ts @ main.bundle.js:36
webpack_require @ inline.bundle.js:55
(anonymous) @ main.ts:4
../../../../../src/main.ts @ main.bundle.js:52
webpack_require @ inline.bundle.js:55
0 @ main.bundle.js:67
webpack_require @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1

iOS problems on render HTML

Im trying to do 5 pages og img and one page of html. But what happens on iOS is that the html page turns black. I have reported this here: mrdoob/three.js#9754 (comment)

But maybe @iberezansky you know a little better what might be wrong? Or where this error might be?

This is also related: tsayen/dom-to-image#74

pageCallback: function(n) {
      if(n==totalPages-1) {
          return {
              type: 'html',
              src: 'src/'+location.hash.substr(1)+'/doodle.html',
              interactive: true
           };
       }
       return {
           type: 'image',
           src: 'src/'+location.hash.substr(1)+'/img-'+(n+1)+'.png',
           interactive: false
       }
};

usages

Sir,
may I use it for my organization to display our multiple pdf files? is there any license required.
Best Regards,
Dinesh

Angular?

Hi,
Do you have support for Angular 10 and Typescript?

single page view mode in Desktop

how to use single page view mode in desktop.i am waiting for your reply,
thanks

It Cannot read property 'bind' of undefined

It worked well with the demo version, I bought it and now it doesn't work

I want to integrate it with Django:

$('#container').FlipBook({
                pdf: "{{ object.archivo.url }}",
                template: {
                    html: '{% static "templates/default-book-view.html" %}',
                    styles: [
                        '{% static "css/short-white-book-view.css" %}'
                    ],
                    links: [
                        {
                            rel: 'stylesheet',
                            href: '{% static "css/font-awesome.min.css" %}'
                        }
                    ],
                    script: '{% static "js/default-book-view.js" %}',
                    sounds: {
                        startFlip: '{% static "sounds/start-flip.mp3" %}',
                        endFlip: '{% static "sounds/end-flip.mp3" %}'
                    }
                }
            });

TypeError: Cannot read property 'bind' of undefined
    at new ClbBookPropsBuilder (3dflipbook.min.js:1)
    at BookView.onLoad (3dflipbook.min.js:1)
    at 3dflipbook.min.js:1
(anonymous) @ 3dflipbook.min.js:1
Promise.catch (async)
View @ 3dflipbook.min.js:1
BookView @ 3dflipbook.min.js:1
_libs.$.fn.FlipBook @ 3dflipbook.min.js:1
(anonymous) @ (index):226
j @ jquery.min.js:2
k @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
R @ jquery.min.js:3