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!
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
chrome --allow-file-access-from-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
The best way is to start modifying one of the HTML examples from the deploy folder.
Call the plugin with an options object as an argument. Options object needs to have pdfUrl or pages array
$("#book1").flipBook(options)
Initiate the plugin with pdfUrl in options object, like this
$(document).ready(function () {
$("#book1").flipBook({
pdfUrl:'pdf/book2.pdf'
})
})
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"}
]
});
})
$(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.
Url to source PDF file
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>'
},
...
]
Url to page image
Url to page thumbnail
Title of the page that will be displayed in table of content
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.
full size of pages rendered from PDF, when book is large or zoomed, default : 2048
smail size of pages rendered from PDF, when book is small, default : 1024
page size on screen when to start to use full page size, default : 1024
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"
}
Start page, default:1
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
Inverted viewer from right to left, default:false
Page thumbnails height, default : 150
Enable autoplay on start, default : false
Autoplay interval in ms, default : 3000
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",
}
]
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
Viewer theme, 1 - 5
Viewer icon set, 'material' or 'fontawesome', default : 'fontawesome'
Viewer background, this can be set to any CSS, for exmaple "#ccc" or "rgba(20,50,30,1.0)" or 'url("bgimage.jpg")'
Viewer background image url, default : null
Url of background image that will be repeated, default : null
If the flipbook container have transparent background
default:false
"light" or "dark", default : "light"
Show side navigation buttons
default : true
Hides bottom menu
default : false
bottom menu background (CSS value)
default : ""
bottom menu covers the book layer
bottom menu has no background, buttons on transparent menu will have different style (floatingBtnColor and floatingBtnBackground)
bottom menu is not full width but centered
top menu background (CSS value)
default : ""
top menu covers the book layer
top menu has no background, buttons on transparent menu will have different style (floatingBtnColor and floatingBtnBackground)
top menu is not full width but centered
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' ]
button shadow (CSS value)
button text shadow (CSS value)
button border (CSS value)
button color (CSS value)
button background (CSS value)
default : 0
side button shadow (CSS value)
side button text shadow (CSS value)
side button border (CSS value)
side button color (CSS value)
side button background (CSS value)
sidebar (Thumbnails, Table of Content) covers the book layer
sidebar (Thumbnails, Table of Content) covers the bottom menu
sidebar (Thumbnails, Table of Content) covers the top menu
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>'
}
$(document).ready(function () {
$("#book1").flipBook({
pdfUrl:"example.pdf",
pages:pages
});
})
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
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.
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://