Real 3D FlipBook - jQuery plugin

Thank you for purchasing Real3D Flipbook. If you have any questions that are beyond the scope of this help file, please feel free to email via my profile page contact form. Thanks so much!

Due to local security restrictions, some things will not work locally, especially in Chrome.  But everything will work once the files have been updated to your website. I recommend testing in Firefox as is more lenient toward local iframe security. 

To run locally in Google Chrome (on windows) :

  1. Close Chrome
  2. Click Start
  3. Type in "run" (without quotes)
  4. Click OK
  5. Type in "chrome  --allow-file-access-from-files" (without quotes)
  6. Click OK

In your main downloaded folder from CodeCanyon you'll find the following structure:

deploy - contains ready to use templates with minified javascript files

source - contains unminified source files

The best way is to start modifying one of the html examples from the deploy folder.

Plugin usage : call the plugin with an options object as an argument.

Flipbook from images

The pages can be images (jpg or png) In this case you need to have array of pages in the options object. Each page needs to have src path, thumbnail path and a title.


$(document).ready(function () {
  var options = {
      {src:"images/book1/page1.jpg", thumb:"images/book1/thumb1.jpg", title:"Cover"},
      {src:"images/book1/page2.jpg", thumb:"images/book1/thumb2.jpg", title:"Page two"},
      {src:"images/book1/page3.jpg", thumb:"images/book1/thumb3.jpg", title:"Page three"},
      {src:"images/book1/page4.jpg", thumb:"images/book1/thumb4.jpg", title:"End"}


Flipbook from pdf

Flipbook can also be generated from a PDF file, in that case you need pdfUrl in options object, like this
$(document).ready(function () {
  var options = {

 You can also override default options:
$(document).ready(function () {
  var options = {
      {src:"images/book1/page1.jpg", thumb:"images/book1/thumb1.jpg", title:"Cover"},
      {src:"images/book1/page2.jpg", thumb:"images/book1/thumb2.jpg", title:"Page two"},
      {src:"images/book1/page3.jpg", thumb:"images/book1/thumb3.jpg", title:"Page three"},
      {src:"images/book1/page4.jpg", thumb:"images/book1/thumb4.jpg", title:""} 


List of all options and default values is listed in the next chapter.

Below are default options for the plugin. You can override any option by passing your options object to the plugin constructor.

Examples of using different options you can find in deploy folder

name: "",

/*array of page objects - this must be passed to plugin constructor


                src:"page url",

                thumb:"thumb url",


            pages: [],

            /*array of table_of_content objects





            tableOfContent: [],

            tableOfContentCloseOnClick: false,

            /*array of html_content objects


                htmlContent:"<div style='display:block;'></div>",



            htmlContents: [],


            webglMinAndroidVersion: 4.4,

            deeplinking: {

                // deep linking options go gere

                enabled: false,

                prefix: ""


            rootFolder: "",

            assets: {

                preloader: "images/preloader.jpg",

                overlay: "images/overlay.png",

                transparent: "images/transparent.png",

                flipMp3: "mp3/turnPage.mp3"


            //pdf file

            pdfUrl: null,

            pdfBrowserViewerIfMobile: false,

            pdfBrowserViewerFullscreen: true,

            pdfBrowserViewerFullscreenTarget: "_blank",

            pdfPageScale: 2,

            rightToLeft: false,

            //page that will be displayed when the book starts

            startPage: 0,

            //if the sound is enabled

            sound: true,

            backgroundColor: "#818181",

            backgroundPattern: "",

            backgroundTransparent: false,

            //book default settings

            pageWidth: null,

            pageHeight: null,

            thumbnailWidth: 100,

            loadAllPages: false,

            //menu buttons

            currentPage: {

                enabled: true,

                title: "Current page"


            btnNext: {

                enabled: true,

                title: "Next page",

                icon: "fa-angle-right"


            btnLast: {

                enabled: false,

                title: "Last page",

                icon: "fa-angle-double-right"


            btnPrev: {

                enabled: true,

                title: "Previous page",

                icon: "fa-angle-left"


            btnFirst: {

                enabled: false,

                title: "First page",

                icon: "fa-angle-double-left"


            btnZoomIn: {

                enabled: true,

                title: "Zoom in",

                icon: "fa-plus"


            btnZoomOut: {

                enabled: true,

                title: "Zoom out",

                icon: "fa-minus"


            btnToc: {

                enabled: true,

                title: "Table of content",

                icon: "fa-list-ol"


            btnThumbs: {

                enabled: true,

                title: "Pages",

                icon: "fa-th-large"


            btnShare: {

                enabled: true,

                title: "Share",

                icon: "fa-link"


            btnDownloadPages: {

                enabled: true,

                title: "Download pages",

                icon: "fa-download",

                url: "images/"


            btnDownloadPdf: {

                forceDownload: false,

                enabled: true,

                title: "Download PDF",

                icon: "fa-file",

                url: "images/pages.pdf",

                openInNewWindow: true


            btnSound: {

                enabled: true,

                title: "Volume",

                icon: "fa-volume-up"


            btnExpand: {

                enabled: true,

                title: "Toggle fullscreen",

                icon: "fa-expand",

                iconAlt: "fa-compress"


            btnSlideshow: {

                enabled: false,

                title: "Toggle slideshow",

                icon: "fa-play",

                iconAlt: "fa-pause"


            btnPrint: {

                enabled: true,

                title: "Print",

                icon: "fa-print"


            btnAutoplay: {

                enabled: true,

                title: "Autoplay",

                icon: "fa-play"




            btnTocIfMobile: true,

            btnThumbsIfMobile: true,

            btnShareIfMobile: false,

            btnDownloadPagesIfMobile: true,

            btnDownloadPdfIfMobile: true,

            btnSoundIfMobile: false,

            btnExpandIfMobile: true,

            btnPrintIfMobile: false,

            sideNavigationButtons: true,

            hideMenu: false,


            google_plus: {

                enabled: true,

                url: null


            twitter: {

                enabled: true,

                url: null,

                description: null


            facebook: {

                enabled: true,

                load_sdk: true,

                url: null,

                app_id: null,

                title: null,

                caption: null,

                description: null,

                image: null


            pinterest: {

                enabled: true,

                url: null,

                image: null,

                description: null


            email: {

                enabled: true,

                title: null,

                description: null


            pdf: {

                annotationLayer: false,


            pageTextureSize: 2048, //1024 or 2048

            //flip animation type; can be "2d", "3d" , "webgl", "swipe"

            viewMode: 'webgl',

            singlePageMode: false,

            singlePageModeIfMobile: true,

            useMobileView: false,

            zoomLevels: [.9, 2, 5],

            zoomDisabled: false,

            //flip animation parameters

            time1: 300,

            transition1: 'easeInSine',

            time2: 400,

            transition2: 'easeOutSine',

            skin: "light", //"dark", "light", "grey"

            contentOnStart: false,

            thumbnailsOnStart: false,

            //lightbox settings

            lightBox: false,

            lightBoxOpened: false,

            lightBoxFullscreen: false,

            lightboxCloseOnClick: false,

            lightboxBackground: null, //css of flipbook background, rgba or hexadecimal color or bg image, for example 'rgba(0,0,0,.5)' or '#F0F0F0' or 'url("overlay.png" ) repeat'

            // WebGL settings

            pan: 0,

            panMax: 10,

            panMax2: 2,

            panMin: -10,

            panMin2: -2,

            tilt: 0,

            tiltMax: 0,

            tiltMax2: 0,

            tiltMin: -20,

            tiltMin2: -5,

            rotateCameraOnMouseMove: false,

            rotateCameraOnMouseDrag: true,

            lights: true,

            spotlightColor : 0xFFFFFF,

            spotlightIntensity : .14,

            ambientLightColor : 0x333333,

            pageRoughness: 1,

            pageMetalness: 0,

            pageHardness: 2,

            coverHardness: 2,

            pageSegmentsW: 5,

            pageSegmentsH: 1,

            pageMiddleShadowSize: 2,

            pageMiddleShadowColorL: "#999999",

            pageMiddleShadowColorR: "#777777",

            pageFlipDuration: 1,

            antialias: false,

            //mobile devices settings - override any setting, for example 


            mobile = {





            mobile: {},

            allowPageScroll: 'vertical', // 'none', 'horizontal', 'vertical' or 'auto'

            logoImg: '', //url of logo image

            logoUrl: '', // url target 

            logoCSS: 'position:absolute;',