# Real3D Flipbook - jQuery plugin

- created: 03/14/2013
- latest update: 03/05/2019
- by: creativeinteractivemedia
- codecanyon.net/user/creativeinteractivemedia

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 here http://codecanyon.net/user/creativeinteractivemedia. Thanks so much!

### Special notes

#### Running things locally

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 Chrome you need to start Google Chrome with local file access

1. close all instances of Chrome
2. click Start
3. type in "run" (without quotes) and hit enter
4. copy paste this line and hit enter:

chrome --allow-file-access-from-files

#####

### Directories and files

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

### Getting started

#### Examples

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. Options object needs to have pdfUrl or pages array

    $("#book1").flipBook(options)

#### PDF Flipbook

Initiate the plugin with pdfUrl in options object, like this

    $(document).ready(function () {
      $("#book1").flipBook({
        pdfUrl:'pdf/book2.pdf'
      })
    })

#### JPG Flipbook

Flipbook can be also used with images In this case you need to have array of pages in the options object. Each page object needs to have "src". For thumbnaill view each page needs to have "thumb". Each page can have "title" that will show in table of content.

    $(document).ready(function () {
      $("#book1").flipBook({
        pages:[
          {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"}
        ]
      });
    })

#### Customizing the viewer

You can customize the viewer with plugin options, for example:

    $(document).ready(function () {
      $("#book1").flipBook({
        pdfUrl:'pdf/book2.pdf',
        skin:"dark",
        btnSize:20,
        backgroundColor:"#666",
        zoomMin:0.9,
      })
    })

List of all available options is in the following chapter.

### General options

#### options.pdfUrl [String]

Url to source PDF file

#### options.pages [Array]

Array of page objects. If not defined then options.pdfUrl is required. If options.pdfUrl is defined then page images and thumbnails will be generated from pdf, but page titles and page htmlContent will be read from options.pages

    [
    {
      src:'images/book1/page1.jpg',
      thumb:'images/book1/thumb1.jpg',
      title:'First page',
      htmlContent:'<idiv style="..."></div>'
    },
    {
      src:'images/book1/page2.jpg',
      thumb:'images/book1/thumb22.jpg',
      title:'',
      htmlContent:'<idiv style="..."></div>'
    },
    {
      src:'images/book1/page3.jpg',
      thumb:'images/book1/thumb3.jpg',
      title:'Page 3',
      htmlContent:'<idiv style="..."></div>'
    },
    ...
    ]

##### page.src [String]

Url to page image

##### page.thumb [String]

Url to page thumbnail

##### page.title [String]

Title of the page that will be displayed in table of content

##### page.htmlContent [String]

HTML that will be added on top of the page. Here you can add any HTML, for exmaple an iframe with youtube video or an overlay click area.

#### options.pageTextureSize [Number]

full size of pages rendered from PDF, when book is large or zoomed, default : 2048

#### options.pageTextureSizeSmall [Number]

smail size of pages rendered from PDF, when book is small, default : 1024

#### options.pageTextureSizeTreshold [Number]

page size on screen when to start to use full page size, default : 1024

#### options.mobile [Object]

Override any option for mobile devices so viewer on mobile can have different setup, for example

    var options = {
      pdfUrl:"example.pdf",
      skin:"light"
    }

    options.mobile = {
      pageTextureSize:1500,
      btnPrint:{enabled:false},
      skin:"dark"
    }

#### options.startPage [Number]

Start page, default:1

#### options.deeplinkingPrefix [String]

enable deeplinking by setting custom prefix for deeplinking hash. Deeplinking adds hash to the end of the url so you can link to certain page for example link to page 3 will end with #3

####

#### options.rightToLeft [Boolean]

Inverted viewer from right to left, default:false

#### options.thumbSize [Number]

Page thumbnails height, default : 150

#### options.autoplayOnStart [Boolean]

Enable autoplay on start, default : false

#### options.autoplayInterval [Number]

Autoplay interval in ms, default : 3000

#### options.tableOfContent [Array]

Custom table of content, array of objects, each object has "title" and "page". Below is an example of custom table of content

    [
      {
        title:"Cover",
        page:"1",
      },
      {
        title:"Chapter 1",
        page:"5",
      },
      {
        title:"Chapter 2",
        page:"11",
      }
    ]

#### options.lightBox [Boolean]

Display viewer in a lightbox overlay that is triggered with click, default : false

#### options.lightBoxOpened [Boolean]

Open lightbox on page load, default : false

#### options.lightBoxFullscreen [Boolean]

Open lightbox in fullscreen, default : false

#### options.lightboxResetOnOpen [Boolean]

Always open lightbox on first page, default : true

#### options.lightboxBackground [String]

CSS for lightbox background, for example 'rgba(0,0,0,.5)' or '#F0F0F0' or 'url("overlay.png" ) repeat'

#### options.lightboxStartPage [Number]

Start page for lightbox

### Menu buttons

All alvailable menu buttons are
'currentPage', 'btnFirst', 'btnPrev', 'btnNext', 'btnLast', 'btnZoomIn', 'btnZoomOut', 'btnRotateLeft', 'btnRotateRight', 'btnAutoplay', 'btnSearch', 'btnSelect', 'btnBookmark', 'btnToc', 'btnThumbs', 'btnShare', 'btnPrint', 'btnDownloadPages', 'btnDownloadPdf', 'btnSound', 'btnExpand', 'btnClose'
You can control each menu button appearence and functionality. Each button has properties

#### button.enabled [Boolean]

Boolean, true or false

#### button.title [String]

button title, for example "Next Page"

#### button.icon [String]

Font awesome CSS class, for example "fa-angle-right". List of all Font awesome icons is here https://fontawesome.com/icons?d=gallery&m=free

#### button.icon2 [String]

Material icon name, for example "chevron_right". List of all Material icons is here https://material.io/tools/icons/?style=baseline

#### button.iconAlt [String]

alternative Font awesome icon, for buttons that have "toggle" function like btnSound or btnExpand

#### button.iconAlt2 [String]

alternative Material icon

#### button.hAlign [String]

horizontal align, "left", "right" or "center", default horizontal align is "center"

#### button.vAlign [String]

vertical align, "top" or "bottom"

#### button.order [Number]

button order, default is 0. To push button to left set button order to negative value, to push to right set button order to positive number

#### button.hideOnMobile [Boolean]

hide button on mobile

All available buttons with default options:

#### options.currentPage

    {
    enabled: true,
    title: "Current page",
    vAlign:'top',
    hAlign:'left',
    marginH:0,
    marginV:0,
    color:'',
    background:''
    }

#### options.btnNext

    {
    enabled: true,
    title: "Next page",
    icon: "fa-angle-right",
    icon2: "chevron_right"
    }

#### options.btnLast

    {
    enabled: false,
    title: "Last page",
    icon: "fa-angle-double-right",
    icon2: "last_page"
    }

#### options.btnPrev

    {
    enabled: true,
    title: "Previous page",
    icon: "fa-angle-left",
    icon2: "chevron_left"
    }

#### options.btnFirst

    {
    enabled: false,
    title: "First page",
    icon: "fa-angle-double-left",
    icon2: "first_page"
    }

#### options.btnZoomIn

    {
    enabled: true,
    title: "Zoom in",
    icon: "fa-plus",
    icon2: "zoom_in"
    }

#### options.btnZoomOut

    {
    enabled: true,
    title: "Zoom out",
    icon: "fa-minus",
    icon2: "zoom_out"
    }

#### options.btnRotateLeft

    {
    enabled: false,
    title: "Rotate left",
    icon: "fas fa-undo"
    }

#### options.btnRotateRight

    {
    enabled: false,
    title: "Rotate right",
    icon: "fas fa-redo"
    }

#### options.btnAutoplay

    {
    enabled: true,
    title: "Autoplay",
    icon: "fa-play",
    icon2: "play_arrow",
    iconAlt:"fa-pause",
    iconAlt2:"pause"
    }

#### options.btnSearch

    {
    enabled: false,
    title: "Search",
    icon: "fas fa-search",
    icon2: "search"
    }

#### options.btnSelect

    {
    enabled: true,
    title: "Select tool",
    icon: "fas fa-i-cursor",
    icon2: "text_format"
    }

#### options.btnBookmark

    {
    enabled: false,
    title: "Bookmark",
    icon: "fas fa-bookmark",
    icon2: "bookmark"
    }

#### options.btnToc

    {
    enabled: true,
    title: "Table of content",
    icon: "fa-list-ol"
    }

#### options.btnThumbs

    {
    enabled: true,
    title: "Pages in",
    icon: "fa-th-large"
    }

#### options.btnShare

    {
    enabled: true,
    title: "Share",
    icon: "fa-link"
    }

#### options.btnPrint

    {
    enabled: true,
    title: "Print",
    icon: "fa-print",
    icon2: "print",
    hideOnMobile:true
    }

#### options.btnDownloadPages

    {
    enabled: true,
    title: "Download pages",
    icon: "fa-download",
    icon2: "file_download",
    url: "images/pages.zip",
    name: "allPages.zip"
    }

#### options.btnDownloadPdf

    {
    forceDownload: false,
    enabled: true,
    title: "Download PDF",
    icon: "fa-file",
    icon2: "picture_as_pdf",
    url: null,
    openInNewWindow: true,
    name: "allPages.pdf"
    }

#### options.btnSound

    {
    enabled: true,
    title: "Volume",
    icon: "fa-volume-up",
    iconAlt: "fa-volume-off",
    icon2: "volume_up",
    iconAlt2: "volume_mute",
    hideOnMobile:true
    }

#### options.btnExpand

    {
    enabled: true,
    title: "Toggle fullscreen",
    icon: "fa-expand",
    icon2: "fullscreen",
    iconAlt: "fa-compress",
    iconAlt2: "fullscreen_exit"
    }

#### options.btnClose

    {
    title: "Close",
    icon: "fa-times",
    icon2: "close",
    hAlign:'right',
    vAlign:'top'
    }

### Share buttons

#### options.google_plus

    {
    enabled: true,
    url: null
    }

#### options.twitter

    {
    enabled: true,
    url: null,
    description: null
    }

#### options.facebook

    {
    enabled: true,
    load_sdk: true,
    url: null,
    app_id: null,
    title: null,
    caption: null,
    description: null,
    image: null
    }

#### options.pinterest

    {
    enabled: true,
    url: null,
    image: null,
    description: null
    }

#### options.email

    {
    enabled: true,
    title: null,
    description: null
    }

### UI

Defautl UI is defined in the CSS file so you can easily customize the Viewer UI. There are 4 pre-made UI layouts available, that can be selected with option

For example, to use layout 2 initialize the plugin like this

    $("#container").flipBook({
    pdfUrl: ... ,
    layout:2
    })

You can customize the UI through various options by overriding the default options.

    $("#container").flipBook({
    pdfUrl: ... ,
    layout:3,
    btnColor:"#CCC",
    menu2Transparent:true,
    sideNavigationButtons:false,
    skin:"dark",
    icons:'material'
    })

Here is list of all options to customize the UI

#### options.layout [Number]

Viewer theme, 1 - 5

#### options.icons [String]

Viewer icon set, 'material' or 'fontawesome', default : 'fontawesome'

#### options.backgroundColor [String]

Viewer background, this can be set to any CSS, for exmaple "#ccc" or "rgba(20,50,30,1.0)" or 'url("bgimage.jpg")'

#### options.backgroundImage [String]

Viewer background image url, default : null

#### options.backgroundPattern [String]

Url of background image that will be repeated, default : null

#### options.backgroundTransparent [Boolean]

If the flipbook container have transparent background

default:false

#### options.skin [String]

"light" or "dark", default : "light"

#### options.sideNavigationButtons [Boolean]

Show side navigation buttons

default : true

#### options.hideMenu [Boolean]

Hides bottom menu

default : false

#### options.menuMargin [String]

default : 0

#### options.menuPadding [String]

default : 0

#### options.menuShadow [String]

bottom menu shadow (CSS value)
default : ''

#### options.menuBackground [String]

bottom menu background (CSS value)

default : ""

#### options.menuOverBook [Boolean]

bottom menu covers the book layer

default : false

#### options.menuTransparent [Boolean]

bottom menu has no background, buttons on transparent menu will have different style (floatingBtnColor and floatingBtnBackground)

default : false

#### options.menuFloating [Boolean]

bottom menu is not full width but centered

default : false

#### options.menu2Margin [String]

default : 0

#### options.menu2Padding [String]

default : 0

#### options.menu2Shadow [String]

top menu shadow (CSS value)
default : ''

#### options.menu2Background [String]

top menu background (CSS value)

default : ""

#### options.menu2OverBook [Boolean]

top menu covers the book layer

default : false

#### options.menu2Transparent [Boolean]

top menu has no background, buttons on transparent menu will have different style (floatingBtnColor and floatingBtnBackground)

default : true

#### options.menu2Floating [Boolean]

top menu is not full width but centered

default : false

#### options.btnOrder [Array]

can be used to order buttons and set buttons that will be displayed in the menu.

default : [ 'currentPage', 'btnFirst', 'btnPrev', 'btnNext', 'btnLast', 'btnZoomIn', 'btnZoomOut', 'btnRotateLeft', 'btnRotateRight', 'btnAutoplay', 'btnSearch', 'btnSelect', 'btnBookmark', 'btnToc', 'btnThumbs', 'btnShare', 'btnPrint', 'btnDownloadPages', 'btnDownloadPdf', 'btnSound', 'btnExpand', 'btnClose' ]

#### options.btnSize [Number]

default : 16

#### options.btnRadius [Number]

default : 2

#### options.btnMargin [Number]

default : 2

#### options.btnShadow [String]

button shadow (CSS value)

default : ""

#### options.btnTextShadow [String]

button text shadow (CSS value)

default : ""

#### options.btnBorder [String]

button border (CSS value)

default : ""

#### options.btnColor [String]

button color (CSS value)

default : ""

#### options.btnBackground [String]

button background (CSS value)

default : "none"

#### options.sideBtnSize [Number]

default : 30

#### options.sideBtnRadius [Number]

default : 0

#### options.sideBtnMargin [Number]

default : 0

#### options.sideBtnPaddingV [Number]

default : 5

#### options.sideBtnPaddingH [Number]

default : 0

#### options.sideBtnShadow [String]

side button shadow (CSS value)

default : ""

#### options.sideBtnTextShadow [String]

side button text shadow (CSS value)

default : ""

#### options.sideBtnBorder [String]

side button border (CSS value)

default : ""

#### options.sideBtnColor [String]

side button color (CSS value)

default : #FFF'

#### options.sideBtnBackground [String]

side button background (CSS value)

default : "rgba(0,0,0,.3)"

#### options.sideMenuOverBook [Boolean]

sidebar (Thumbnails, Table of Content) covers the book layer

default : true

#### options.sideMenuOverMenu [Boolean]

sidebar (Thumbnails, Table of Content) covers the bottom menu

default : false

#### options.sideMenuOverMenu2 [Boolean]

sidebar (Thumbnails, Table of Content) covers the top menu

default : true

### Adding custom HTML content to pages

You can add any HTML content to a page. For that you need to pass "pages" object to pluign constructor. For example add some text to page 2 and iframe to page 4

    var pages = []

    pages[1] = {
    htmlContent:'<p>Some text</p><div style="position:absolute;top:100px;left:200px;">div with custom css</div>'
    }
    pages[3] = {
    htmlContent:'<iframe width="640" height="360" src="https://www.youtube.com/embed/KDP0dCZ6M68" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
    }

Then you pass pdfUrl and pages to plugin constructor

    $(document).ready(function () {
      $("#book1").flipBook({
        pdfUrl:"example.pdf",
        pages:pages
      });
    })

### FAQ

#### Can I load a PDF/images from another server (cross domain request)?

By default PDF and images needs to be on the same server. To use resources from another domain you need to add Access-Control-Allow-Origin header to server response, for example to allow http://foo.example to load the resources you need to add header

    Access-Control-Allow-Origin: http://foo.example

#### Flipbook is not working

Please check your browser console for errors. In most cases the problem is that flipbook has no PDF/images specified, or is trying to load PDF/images from another domain. There might also be other javascript errors on the page, coming from another plugin. Try to disable other plugins to see if another plugin is causing the problem.

#### Mixed content error in browser console

If you get error that looks like this

    Mixed Content: The page at 'https://www....' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www....'. This request has been blocked; the content must be served over HTTPS.

that means that your page is serverd over HTTPS so you need to load resources over HTTPS also, so you need to update pdf url or page image urls and replace http:// with https://